SVG <g>元素用于將SVG形狀分組在一起。分組后，您可以像變形單個(gè)形狀一樣變換整個(gè)形狀。與 不能單獨(dú)成為轉(zhuǎn)換目標(biāo)的嵌套 <svg>元素相比，這是一個(gè)優(yōu)勢(shì)。您還可以設(shè)置分組元素的樣式，并像對(duì)待單個(gè)元素一樣重復(fù)使用它們。
元素g是用來組合對(duì)象的容器。添加到g元素上的變換會(huì)應(yīng)用到其所有的子元素上。添加到g元素的屬性會(huì)被其所有的子元素繼承。此外，g元素也可以用來定義復(fù)雜的對(duì)象，之后可以通過<use>元素來引用它們。
這是一個(gè)簡(jiǎn)單的SVG <g>示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"/> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"/> <text x="10" y="90" style="stroke: #660000; fill: #660000"> (cainiaoplus.com) 菜鳥教程</text> </g> </svg>測(cè)試看看 ?/?
運(yùn)行后圖像效果：
此示例顯示了以<g>元素組合在一起的3個(gè)形狀。 如此處所列，在此分組中沒有特別的好處。 但是請(qǐng)注意當(dāng)我們請(qǐng)求轉(zhuǎn)換<g>元素時(shí)會(huì)發(fā)生什么。 這是代碼：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="rotate(45 50 50)"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"/> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"/> <text x="10" y="90" style="stroke: #660000; fill: #660000"> (cainiaoplus.com) 菜鳥教程</text> </g> </svg>測(cè)試看看 ?/?
運(yùn)行后圖像效果：
注意<g>元素中的所有形狀如何圍繞點(diǎn)50,50旋轉(zhuǎn)45度。
<g>元素 的CSS樣式由其子元素繼承。這是一個(gè)示例：
<svg width="320" height="150"><g style="stroke: #0000ff; stroke-width: 4px; fill: #ff0000"> <rect x="10" y="10" width="100" height="50" /> <circle cx="150" cy="35" r="25" /> <circle cx="250" cy="35" r="25" style="stroke: #009900; fill: #00ff00;"/> </g> </svg>測(cè)試看看 ?/?
本示例定義了一個(gè)<g>具有三個(gè)子元素的元素。該<g> 元素具有一個(gè)style屬性。前兩個(gè)子元素沒有style屬性。因此，元素中定義的樣式<g>被這些子元素繼承。第三個(gè)子元素具有一個(gè)style設(shè)置筆觸和填充顏色的屬性，但它仍繼承該<g>元素的stroke-width屬性。
運(yùn)行后圖像效果：
與將嵌套的<svg>元素內(nèi)的形狀分組相比，轉(zhuǎn)換<g>元素內(nèi)的所有形狀的能力是一個(gè)優(yōu)勢(shì)。 <svg>元素不能自行轉(zhuǎn)換。 您必須將<svg>元素嵌套在<g>元素內(nèi)，以轉(zhuǎn)換其嵌套形狀。
不過，與<svg>元素相比，<g>元素有一個(gè)缺點(diǎn)。 不能僅通過更改<g>元素的x和y屬性來移動(dòng)包括所有嵌套形狀的<g>元素。 <g>元素沒有x和y屬性。 要移動(dòng)<g>元素的內(nèi)容，只能使用transform屬性使用“ translate”函數(shù)，例如：transform ="translate(x,y)"。
如果需要使用x和y屬性在<g>元素內(nèi)移動(dòng)所有形狀，則需要將<g>元素嵌套在<svg>元素內(nèi)。 <svg>元素具有x和y屬性。 這是一個(gè)實(shí)例：
<svg width="320" height="150"> <g transform="rotate(45 50 50)"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"/> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"/> <text x="10" y="90" style="stroke: #660000; fill: #660000"> (cainiaoplus.com) 菜鳥教程</text> </g> </svg>測(cè)試看看 ?/?
在此示例中，<g>元素內(nèi)的所有形狀都嵌套在 <svg>元素內(nèi)。請(qǐng)注意，將<svg>的x屬性設(shè)置為100。這意味著首先對(duì)內(nèi)的形狀<g>進(jìn)行轉(zhuǎn)換，然后沿x軸移動(dòng)100，因?yàn)?code><svg>位置x = 100。運(yùn)行后圖像效果：
您還可以切換嵌套，將<svg>元素嵌套在<g>元素內(nèi) ，如下所示：
<svg width="320" height="150"> <g transform="rotate(45 50 50)"> <svg x="100"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"></line> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"></rect> <text x="10" y="90" style="stroke: #660000; fill: #660000">(cainiaoplus.com) 菜鳥教程</text> </svg> </g> </svg>測(cè)試看看 ?/?
然后，形狀首先沿著x軸移動(dòng)100，因?yàn)?lt;svg>元素的位置是x="100"，然后從該位置繞點(diǎn)50,50旋轉(zhuǎn)45度。結(jié)果如下:
這兩個(gè)圖像可能看起來相似，但是有所不同。 不同之處在于執(zhí)行運(yùn)動(dòng)和旋轉(zhuǎn)的順序。 如果仔細(xì)觀察，還可以在圖像上看到。 顯示的形狀放置不均。 此外，請(qǐng)注意，即使第一個(gè)圖像在x方向上以點(diǎn)點(diǎn)的方式顯示在圖像中，也是如此。 發(fā)生這種情況是因?yàn)槭紫刃D(zhuǎn)了形狀，然后在旋轉(zhuǎn)部分中文本伸出了圖像。 此后向左移動(dòng)時(shí)，仍然缺少缺少的文本部分。