[Translate the G element in the SVG tutorial]svg

The <g> elements in SVG are used to organize SVG elements. If a set of SVG elements are wrapped by the G element, you can transform the G element (transform), and the elements wrapped by the G element will be transformed, just as the elements of the SVG package are an element, which is a good advantage compared to <svg>. Elements in nested SVG are not affected by transformations.

G Element Instance

G Element code example

<svg xmlns= "Http://www.w3.org/2000/svg"    xmlns:xlink= "Http://www.w3.org/1999/xlink" >        <g>      <line x1= "Ten" y1= "ten" x2= "" y2= "" style= "          Stroke: #006600;" /> <rect x= "y=" "height=" "width=" "style="          Stroke: #006600; Fill: #006600 "/>      <text X = "Ten" y= "style=" Stroke: #660000; Fill: #660000 ">        Text grouped with shapes</text>    </g></svg>

The effect is as follows

This code example immediately, the G element wraps 3 elements (two lines a text box)

Now let's look at the transformation of the G element

<svg xmlns= "Http://www.w3.org/2000/svg"    xmlns:xlink= "Http://www.w3.org/1999/xlink" >    <g transform= "Rotate" >      <line x1= "Ten" y1= "ten" x2= "" y2= "style="          Stroke: #006600; " /> <rect x= "y=" "height=" "width=" "style="          Stroke: #006600; Fill: #006600 "/>      <text X = "Ten" y= "style=" Stroke: #660000; Fill: #660000 ">        Text grouped with shapes</text>    </g></svg>

The effect is as follows

As you can see, all elements that are wrapped in the G element are rotated 45 degrees in 50,50.

g element Style inheritance

The style of the G element is inherited by the wrapped elements

For example

<g style= "Stroke: #0000ff; stroke-width:4px; Fill: #ff0000 ">    <rect    x=" Ten "  y=" width= "" height= ""/> <circle cx= "" cy= "    R = "/>"    <circle cx= "cy=" "r=" "           style=" Stroke: #009900; fill: #00ff00; " /></g>

This code contains a rectangle of two circles, and the G element defines the width and color of the border and the color of the fill

The first rectangle and the first element inherit these second circles and override the styles themselves, and I look at the effect

G-tuple does not support positioning attributes X and Y

The G element does not support positioning attributes X and Y compared to the <svg> element, and can be substituted with a transform attribute when locating:transform="translate(x,y)

[Translate the G element in the SVG tutorial]svg