SVG 元素

SVG 元素用于將SVG形狀分組在一起。分組后，您可以像變形單個形狀一樣變換整個形狀。與 不能單獨成為轉換目標的嵌套 元素相比，這是一個優勢。您還可以設置分組元素的樣式，并像對待單個元素一樣重復使用它們。

元素g是用來組合對象的容器。添加到g元素上的變換會應用到其所有的子元素上。添加到g元素的屬性會被其所有的子元素繼承。此外，g元素也可以用來定義復雜的對象，之后可以通過元素來引用它們。

SVG 元素示例

這是一個簡單的SVG 示例：

示例

xmlns:xlink="http://www.w3.org/1999/xlink">

style="stroke:?#006600;"/>

style="stroke:?#006600;?fill:?#006600"/>

nhooo.com?基礎教程

測試看看 ?/?

運行后圖像效果：

nhooo.com 基礎教程

此示例顯示了以元素組合在一起的3個形狀。 如此處所列，在此分組中沒有特別的好處。 但是請注意當我們請求轉換元素時會發生什么。 這是代碼：

示例

xmlns:xlink="http://www.w3.org/1999/xlink">

style="stroke:?#006600;"/>

style="stroke:?#006600;?fill:?#006600"/>

nhooo.com?基礎教程

測試看看 ?/?

運行后圖像效果：

nhooo.com 基礎教程

注意元素中的所有形狀如何圍繞點50,50旋轉45度。

g元素的樣式由其子元素繼承

元素?的CSS樣式由其子元素繼承。這是一個示例：

示例

style="stroke:?#009900;?fill:?#00ff00;"/>

測試看看 ?/?

本示例定義了一個具有三個子元素的元素。該 元素具有一個style屬性。前兩個子元素沒有style屬性。因此，元素中定義的樣式被這些子元素繼承。第三個子元素具有一個style設置筆觸和填充顏色的屬性，但它仍繼承該元素的stroke-width屬性。

運行后圖像效果：

缺點：G元素沒有X和Y屬性

與將嵌套的元素內的形狀分組相比，轉換元素內的所有形狀的能力是一個優勢。 元素不能自行轉換。 您必須將元素嵌套在元素內，以轉換其嵌套形狀。

不過，與元素相比，元素有一個缺點。 不能僅通過更改元素的x和y屬性來移動包括所有嵌套形狀的元素。 元素沒有x和y屬性。 要移動元素的內容，只能使用transform屬性使用“ translate”函數，例如：transform ="translate(x,y)"。

如果需要使用x和y屬性在元素內移動所有形狀，則需要將元素嵌套在元素內。 元素具有x和y屬性。 這是一個實例：

示例

style="stroke:?#006600;"/>

style="stroke:?#006600;?fill:?#006600"/>

nhooo.com?基礎教程

測試看看 ?/?

在此示例中，元素內的所有形狀都嵌套在?元素內。請注意，將的x屬性設置為100。這意味著首先對內的形狀進行轉換，然后沿x軸移動100，因為位置x = 100。運行后圖像效果：

nhooo.com 基礎教程

您還可以切換嵌套，將元素嵌套在元素內 ，如下所示：

示例

nhooo.com?基礎教程

測試看看 ?/?

然后，形狀首先沿著x軸移動100，因為元素的位置是x="100"，然后從該位置繞點50,50旋轉45度。結果如下:

nhooo.com 基礎教程

這兩個圖像可能看起來相似，但是有所不同。 不同之處在于執行運動和旋轉的順序。 如果仔細觀察，還可以在圖像上看到。 顯示的形狀放置不均。

此外，請注意，即使第一個圖像在x方向上以點點的方式顯示在圖像中，也是如此。 發生這種情況是因為首先旋轉了形狀，然后在旋轉部分中文本伸出了圖像。

此后向左移動時，仍然缺少缺少的文本部分。