svg-g元素

[suoutsky]

1. g元素：svg 中的元素用来组织svg元素。如果一组svg元素被g元素包裹了，你可以通过对g元素进行变换（transform），被g元素包裹的元素也将被变换，就好这些被svg包裹的元素是一个元素一样，和相比这是一个很好的优势，嵌套的svg中元素是不会被变换影响的。

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

2. g元素样式继承 , g元素的样式 会被那些包裹着的元素继承

3. g元组不支持 定位属性 x和y 和元素相比，g元素不支持定位属性x和y，需要定位的时候可以用变换属性代替: transform="translate(x,y)