SVG 元素

SVG 元素用于將SVG形狀分組在一起。分組后，您可以像變形單個(gè)形狀一樣變換整個(gè)形狀。與 不能單獨(dú)成為轉(zhuǎn)換目標(biāo)的嵌套 元素相比，這是一個(gè)優(yōu)勢(shì)。您還可以設(shè)置分組元素的樣式，并像對(duì)待單個(gè)元素一樣重復(fù)使用它們。

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

SVG 元素示例

這是一個(gè)簡(jiǎn)單的SVG 示例：

示例

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

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

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

nhooo.com?基礎(chǔ)教程

測(cè)試看看 ?/?

運(yùn)行后圖像效果：

nhooo.com 基礎(chǔ)教程

此示例顯示了以元素組合在一起的3個(gè)形狀。 如此處所列，在此分組中沒有特別的好處。 但是請(qǐng)注意當(dāng)我們請(qǐng)求轉(zhuǎn)換元素時(shí)會(huì)發(fā)生什么。 這是代碼：

示例

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

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

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

nhooo.com?基礎(chǔ)教程

測(cè)試看看 ?/?

運(yùn)行后圖像效果：

nhooo.com 基礎(chǔ)教程

注意元素中的所有形狀如何圍繞點(diǎn)50,50旋轉(zhuǎn)45度。

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

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

示例

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

測(cè)試看看 ?/?

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

運(yùn)行后圖像效果：

缺點(diǎn)：G元素沒有X和Y屬性

與將嵌套的元素內(nèi)的形狀分組相比，轉(zhuǎn)換元素內(nèi)的所有形狀的能力是一個(gè)優(yōu)勢(shì)。 元素不能自行轉(zhuǎn)換。 您必須將元素嵌套在元素內(nèi)，以轉(zhuǎn)換其嵌套形狀。

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

如果需要使用x和y屬性在元素內(nèi)移動(dòng)所有形狀，則需要將元素嵌套在元素內(nèi)。 元素具有x和y屬性。 這是一個(gè)實(shí)例：

示例

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

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

nhooo.com?基礎(chǔ)教程

測(cè)試看看 ?/?

在此示例中，元素內(nèi)的所有形狀都嵌套在?元素內(nèi)。請(qǐng)注意，將的x屬性設(shè)置為100。這意味著首先對(duì)內(nèi)的形狀進(jìn)行轉(zhuǎn)換，然后沿x軸移動(dòng)100，因?yàn)槲恢脁 = 100。運(yùn)行后圖像效果：

nhooo.com 基礎(chǔ)教程

您還可以切換嵌套，將元素嵌套在元素內(nèi) ，如下所示：

示例

nhooo.com?基礎(chǔ)教程

測(cè)試看看 ?/?

然后，形狀首先沿著x軸移動(dòng)100，因?yàn)樵氐奈恢檬莤="100"，然后從該位置繞點(diǎn)50,50旋轉(zhuǎn)45度。結(jié)果如下:

nhooo.com 基礎(chǔ)教程

這兩個(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í)，仍然缺少缺少的文本部分。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的g标签 怎么设置svg_SVG g元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。