I am relatively new in SVG drawing with HTML5 .
What I want to do is to make a group of elements in SVG with g element so that all elements inside of that g element can work like a group and all the element's base x and y value can be received from the upper g element .
So, what I have done is something like this-
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> <gx="1000" y="1000"> <title>SVG Title Demo example</title> <rect width="200" height="50" style="fill:wheat; stroke:blue; stroke-width:1px"/> <text style="text-anchor: middle;" class="small">My Text</text> </g> </svg>
What I expected is all the elements inside the g element will get x="1000"
and y="1000"
so my expected output is like this-
But I am getting this-
I don't like to set x and y element in text
element. I just want to set relative x and y into the text
element if needed, but that should be relative to g element.
Can anyone help me what I need to do to achieve my target with a group in SVG?
<g>
elements don't support x or y attributes. You can use a transform instead though.
I've decreased the values from 1000 to 100 as otherwise the output is outside the 500 x 300 canvas of the outer <svg>
element.
I've provided additional x and y attributes on the text element so it appears positioned as in your example. If wanted you could put the text itself in a <g>
element or an <svg>
element.
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100, 100)"> <title>SVG Title Demo example</title> <rect width="200" height="50" style="fill:wheat; stroke:blue; stroke-width:1px"/> <text x="100" y="30" style="text-anchor: middle;" class="small">My Text</text> </g> </svg>
or using an additional <g>
element to avoid x and y on the text itself.
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100, 100)"> <title>SVG Title Demo example</title> <rect width="200" height="50" style="fill:wheat; stroke:blue; stroke-width:1px"/> <g transform="translate(100, 30)"> <text style="text-anchor: middle;" class="small">My Text</text> </g> </g> </svg>
Alternatively you could use an inner <svg>
element instead of a <g>
element as that does support x and y attributes
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> <svg x="100" y="100"> <title>SVG Title Demo example</title> <rect width="200" height="50" style="fill:wheat; stroke:blue; stroke-width:1px"/> <text x="100" y="30" style="text-anchor: middle;" class="small">My Text</text> </svg> </svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.