SVG Position text relative to parent

Question

I need to place text relative to the parent .

Currently, I have a path and a text element wrapped in a . But all the text coo

Answer 1

It's hard to see which part of this you're having trouble with, but I'll explain as best I can.

Your SVG picture is 1000 pixels wide and 550 pixels tall:

The top level node inside this SVG is a node that moves the origin of the coordinate system from the top left corner to (500,275) (i.e., the middle of the drawing area; Y coordinates increase from top to bottom in SVGs)

All the children of this top-level node will therefore use this transformed coordinate system. You have added additional nodes as children of this top-level node, but they don't really do anything in this instance because they contain no attributes:

As a result, the nodes will still be using the same transformed coordinate system that was set up by the top-level . These all produce circular sectors with an apex at (0,0). And since (0,0) corresponds to the middle of the drawing area in this transformed coordinate system, that is where they end up:

Your nodes are also drawn in this coordinate system, but offset by (100,100) because you added a transform attribute to shift them 100 pixels down and 100 pixels to the right:

text

So the end result is that all three of your text nodes are drawn at coordinates of (600,375) relative to the top left corner of the drawing area. If you want the text to appear somewhere else, you'll have specify a different offset. For example:

text
text
text