<g>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das <g>
SVG-Element ist ein Container, der verwendet wird, um andere SVG-Elemente zu gruppieren.
Transformationen, die auf das <g>
-Element angewendet werden, werden auf seine Kindelemente übertragen, und seine Attribute werden von seinen Kindern geerbt. Es kann auch mehrere Elemente gruppieren, die später mit dem <use>
-Element referenziert werden können.
Beispiel
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>
</svg>
Verwendungskontext
Kategorien | Container-Element, Strukturelement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # GElement |
Browser-Kompatibilität
BCD tables only load in the browser