g标签 怎么设置svg_SVG g元素
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方向上以點點的方式顯示在圖像中，也是如此。 發生這種情況是因為首先旋轉了形狀，然后在旋轉部分中文本伸出了圖像。
此后向左移動時，仍然缺少缺少的文本部分。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的g标签 怎么设置svg_SVG g元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宝马7系04款后座可以放倒吗？
- 下一篇： spark将rdd转为string_八、