SVG <g>元素用于將SVG形狀分組在一起。分組后，您可以像變形單個形狀一樣變換整個形狀。與 不能單獨成為轉(zhuǎn)換目標(biāo)的嵌套 <svg>元素相比，這是一個優(yōu)勢。您還可以設(shè)置分組元素的樣式，并像對待單個元素一樣重復(fù)使用它們。
元素g是用來組合對象的容器。添加到g元素上的變換會應(yīng)用到其所有的子元素上。添加到g元素的屬性會被其所有的子元素繼承。此外，g元素也可以用來定義復(fù)雜的對象，之后可以通過<use>元素來引用它們。
這是一個簡單的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>測試看看 ?/?
運行后圖像效果：
此示例顯示了以<g>元素組合在一起的3個形狀。 如此處所列，在此分組中沒有特別的好處。 但是請注意當(dāng)我們請求轉(zhuǎn)換<g>元素時會發(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>測試看看 ?/?
運行后圖像效果：
注意<g>元素中的所有形狀如何圍繞點50,50旋轉(zhuǎn)45度。
<g>元素 的CSS樣式由其子元素繼承。這是一個示例：
<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>測試看看 ?/?
本示例定義了一個<g>具有三個子元素的元素。該<g> 元素具有一個style屬性。前兩個子元素沒有style屬性。因此，元素中定義的樣式<g>被這些子元素繼承。第三個子元素具有一個style設(shè)置筆觸和填充顏色的屬性，但它仍繼承該<g>元素的stroke-width屬性。
運行后圖像效果：
與將嵌套的<svg>元素內(nèi)的形狀分組相比，轉(zhuǎn)換<g>元素內(nèi)的所有形狀的能力是一個優(yōu)勢。 <svg>元素不能自行轉(zhuǎn)換。 您必須將<svg>元素嵌套在<g>元素內(nèi)，以轉(zhuǎn)換其嵌套形狀。
不過，與<svg>元素相比，<g>元素有一個缺點。 不能僅通過更改<g>元素的x和y屬性來移動包括所有嵌套形狀的<g>元素。 <g>元素沒有x和y屬性。 要移動<g>元素的內(nèi)容，只能使用transform屬性使用“ translate”函數(shù)，例如：transform ="translate(x,y)"。
如果需要使用x和y屬性在<g>元素內(nèi)移動所有形狀，則需要將<g>元素嵌套在<svg>元素內(nèi)。 <svg>元素具有x和y屬性。 這是一個實例：
<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>測試看看 ?/?
在此示例中，<g>元素內(nèi)的所有形狀都嵌套在 <svg>元素內(nèi)。請注意，將<svg>的x屬性設(shè)置為100。這意味著首先對內(nèi)的形狀<g>進行轉(zhuǎn)換，然后沿x軸移動100，因為<svg>位置x = 100。運行后圖像效果：
您還可以切換嵌套，將<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>測試看看 ?/?
然后，形狀首先沿著x軸移動100，因為<svg>元素的位置是x="100"，然后從該位置繞點50,50旋轉(zhuǎn)45度。結(jié)果如下:
這兩個圖像可能看起來相似，但是有所不同。 不同之處在于執(zhí)行運動和旋轉(zhuǎn)的順序。 如果仔細(xì)觀察，還可以在圖像上看到。 顯示的形狀放置不均。 此外，請注意，即使第一個圖像在x方向上以點點的方式顯示在圖像中，也是如此。 發(fā)生這種情況是因為首先旋轉(zhuǎn)了形狀，然后在旋轉(zhuǎn)部分中文本伸出了圖像。 此后向左移動時，仍然缺少缺少的文本部分。