svg 元素
svg 元素用於將svg形狀分組在一起。分組後，您可以像變形單個形狀一樣變換整個形狀。與 不能單獨成為轉換目標的巢狀 元素相比，這是乙個優勢。您還可以設定分組元素的樣式，並像對待單個元素一樣重複使用它們。
元素g是用來組合物件的容器。新增到g元素上的變換會應用到其所有的子元素上。新增到g元素的屬性會被其所有的子元素繼承。此外，g元素也可以用來定義複雜的物件，之後可以通過元素來引用它們。
svg 元素示例
這是乙個簡單的svg 示例：
示例xmlns:xlink="">
style="stroke: #006600;"/>
style="stroke: #006600; fill: #006600"/>
nhooo.com 基礎教程
測試看看 ‹/›
執行後影象效果：
nhooo.com 基礎教程
此示例顯示了以元素組合在一起的3個形狀。 如此處所列，在此分組中沒有特別的好處。 但是請注意當我們請求轉換元素時會發生什麼。 這是**：
示例xmlns: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方向上以點點的方式顯示在影象中，也是如此。 發生這種情況是因為首先旋轉了形狀，然後在旋轉部分中文字伸出了影象。
此後向左移動時，仍然缺少缺少的文字部分。
標籤怎麼用？
2013 06 17 12 59 殤2575694003 分類 html css 瀏覽3162次 2013 06 19 09 02 提問者採納 標籤定義 的表頭。該標籤用於組合 html 的表頭內容。thead 元素應該與 tbody 和 tfoot 元素結合起來使用。tbody 元素用於對 htm...
H標籤怎麼使用
合理的運用好h標籤，搜尋引擎會給予非常高的權重，濫用h標籤會被搜尋引擎認為是黑帽手法會被k站的。所以，運用好這些標籤也是很重要的。關於h系列標籤作用可能大家已經比較清楚了，標籤 到定義標題頭的六個不同文字大小的tags，本質是為了呈現內容結構。共有六對，文字從大到小，數字越大權重就越低。h標籤表達的...
div標籤的設定
div基本設定 width 寬height 高background 背景background color 背景色 英文單詞 十六進製制 rgb 背景圖background image url 路徑 背景圖平鋪 background repeat no repeat repeat x repeat y...