svg 中的<g>元素用來組織svg元素。若是一組svg元素被g元素包裹了,你能夠經過對g元素進行變換(transform),被g元素包裹的元素也將被變換,就好這些被svg包裹的元素是一個元素同樣,和<svg>相比這是一個很好的優點,嵌套的svg中元素是不會被變換影響的。html
g元素代碼實例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>
效果以下3d
這個代碼示例立馬,g元素包裹了3個元素(兩條線一個文本框)code
下面咱們看看對g元素進行變換orm
<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>
效果以下xml
能夠看到,全部被g元素包裹的元素,都在50,50這點 旋轉了45度htm
g元素的樣式 會被那些包裹着的元素繼承blog
例如繼承
<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元素定義了邊框的寬度和顏色還有填充的顏色ip
第一個矩形和第一個元都會繼承這些第二個圓本身重寫了樣式,我看看看效果
和<svg>元素相比,g元素不支持定位屬性x和y,須要定位的時候能夠用變換屬性代替: transform="translate(x,y)