<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>-Element SVG 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, um später mit dem <use>-Element darauf zu verweisen.
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 geometrische Attribute nur als Präsentationsattribute für ihre vorgesehenen Elemente gültig — sie haben keine Wirkung auf ein <g>-Element und werden nicht an seine Kinder weitergegeben.
Zu diesen nicht vererbten Attributen gehören:
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 |