[翻譯svg教程]svg 中的g元素

svg 中的<g>元素用來組織svg元素。如果一組svg元素被g元素包裹了，你可以通過對g元素進行變換（transform），被g元素包裹的元素也將被變換，就好這些被svg包裹的元素是一個元素一樣，和<svg>相比這是一個很好的優勢，嵌套的svg中元素是不會被變換影響的。

g元素實例

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">
        Text grouped with shapes</text>
    </g>

</svg>

 

效果如下

這個代碼示例立馬，g元素包裹了3個元素（兩條線一個文本框）

下面我們看看對g元素進行變換

<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">
        Text grouped with shapes</text>
    </g>

</svg>

 

效果如下

可以看到，所有被g元素包裹的元素，都在50，50這點 旋轉了45度

g元素樣式繼承

g元素的樣式 會被那些包裹着的元素繼承

例如

<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>

 

這段代碼包含一個矩形 兩個圓，g元素定義了邊框的寬度和顏色還有填充的顏色

第一個矩形和第一個元都會繼承這些第二個圓自己重寫了樣式，我看看看效果

g元組不支持 定位屬性 x和y

 

和<svg>元素相比，g元素不支持定位屬性x和y，需要定位的時候可以用變換屬性代替: transform="translate(x,y)