SVG Position text relative to parent -

SVG Position text relative to parent <g> -

i need place text relative parent <g>.

currently, have path , text element wrapped in <g>. text coordinates relative outer <g>.

class="snippet-code-html lang-html prettyprint-override"><svg width="1000" height="550"> <g transform="translate(500,275)" stroke-width="2" stroke="black"> <g> <path d="m1.6838893488276108e-14,-275a275,275 0 0,1 238.15698604072065,137.49999999999994l0,0z" id="path_0" style="fill: rgb(17, 17, 17);"></path> <text transform="translate(100, 100)" class="tooltiptext" stroke-width="0" fill="white" style="text-anchor: middle;">text</text> </g> <g> <path d="m238.15698604072065,137.49999999999994a275,275 0 0,1 -238.1569860407206,137.50000000000009l0,0z" id="path_1" style="fill: rgb(34, 34, 34);"></path> <text transform="translate(100, 100)" class="tooltiptext" stroke-width="0" fill="white" style="text-anchor: middle;">text</text> </g> <g> <path d="m-238.1569860407206,137.50000000000009a275,275 0 0,1 -5.051668046482832e-14,-275l0,0z" id="path_2" style="fill: rgb(51, 51, 51);"></path> <text transform="translate(100, 100)" class="tooltiptext" stroke-width="0" fill="white" style="text-anchor: middle;">text</text> </g> </g> </svg>

it's hard see part of you're having problem with, i'll explain best can.

your svg image 1000 pixels wide , 550 pixels tall:

<svg width="1000" height="550">

the top level node within svg <g> node moves origin of coordinate scheme top left corner (500,275) (i.e., middle of drawing area; y coordinates increment top bottom in svgs)

<g transform="translate(500,275)" ... >

all children of top-level node hence utilize transformed coordinate system. have added additional <g> nodes children of top-level node, don't in instance because contain no attributes:

<g>

as result, <path> nodes still using same transformed coordinate scheme set top-level <g>. these produce circular sectors apex @ (0,0). , since (0,0) corresponds middle of drawing area in transformed coordinate system, end up:

<path d="m0-275a275 275 0 0 1 238 137.5l0 0z" style="fill: rgb(17, 17, 17);"></path> <path d="m238 137.5a275 275 0 0 1-238 137.5l0 0z" style="fill: rgb(34, 34, 34);"></path> <path d="m-238 137.5a275 275 0 0 1 0-275l0 0z" style="fill: rgb(51, 51, 51);"></path>

your <text> nodes drawn in coordinate system, offset (100,100) because added transform attribute shift them 100 pixels downwards , 100 pixels right:

<text transform="translate(100, 100)" ... >text</text>

so end result 3 of text nodes drawn @ coordinates of (600,375) relative top left corner of drawing area. if want text appear somewhere else, you'll have specify different offset. example:

<text transform="translate(120,-80)" ... >text</text> <text transform="translate(0,160)" ... >text</text> <text transform="translate(-120,-80)" ... >text</text>

class="snippet-code-html lang-html prettyprint-override"><svg width="1000" height="550"> <g transform="translate(500,275)" stroke-width="2" stroke="black"> <g> <path d="m0-275a275 275 0 0 1 238 137.5l0 0z" style="fill: rgb(17, 17, 17);"></path> <text transform="translate(120,-80)" class="tooltiptext" stroke-width="0" fill="white" style="text-anchor: middle;">text</text> </g> <g> <path d="m238 137.5a275 275 0 0 1-238 137.5l0 0z" style="fill: rgb(34, 34, 34);"></path> <text transform="translate(0,160)" class="tooltiptext" stroke-width="0" fill="white" style="text-anchor: middle;">text</text> </g> <g> <path d="m-238 137.5a275 275 0 0 1 0-275l0 0z" style="fill: rgb(51, 51, 51);"></path> <text transform="translate(-120,-80)" class="tooltiptext" stroke-width="0" fill="white" style="text-anchor: middle;">text</text> </g> </g> </svg>

svg