<g>
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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 an seinen Kindelementen durchgeführt, und die meisten seiner Präsentationsattribute werden von seinen Kindern geerbt. Es kann auch mehrere Elemente gruppieren, die später mit dem <use>-Element referenziert werden können.
Verwendungskontext
| Kategorien | Container-Element, Strukturelement |
|---|---|
| Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Attribute
Dieses Element enthält nur globale Attribute.
Die meisten der Präsentationsattribute, die auf das Element angewendet werden, werden von seinen Kindern geerbt. Jedoch sind Geometrie-Eigenschaften nur als Präsentationsattribute auf ihren vorgesehenen Elementen gültig — sie haben keine Wirkung auf ein <g>-Element und werden nicht an seine Kinder weitergegeben.
Diese nicht vererbten Attribute umfassen:
cx,cy,r:<circle>,<ellipse>rx,ry:<ellipse>,<rect>d:<path>x,y,width,height:<foreignObject>,<image>,<rect>,<svg>,<symbol>,<use>
Nicht-Präsentationsattribute, selbst diejenigen, die auf <g> gültig sind (wie id oder class), werden ebenfalls nicht vererbt.
DOM-Schnittstelle
Dieses Element implementiert die SVGGElement-Schnittstelle.
Beispiel
<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>
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # GElement |