Подтвердить что ты не робот

SVG Текст позиции относительно родительского <g>

Мне нужно разместить текст относительно родительского <g>.

В настоящее время у меня есть путь и текстовый элемент, завернутый в <g>. Но все текстовые координаты относительно внешнего <g>.

<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>
4b9b3361

ОТВЕТЫ

Ответ 1

Трудно понять, с какой частью этого вы столкнулись, но я объясню, насколько это возможно.

Ваше изображение SVG имеет ширину 1000 пикселей и высоту 550 пикселей:

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

Верхний уровень node внутри этого SVG - это <g> node, который перемещает начало координат системы из левого верхнего угла в (500 275) (т.е. в середине области рисования, увеличивается координаты Y сверху вниз в SVG)

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

Таким образом, все дети этого верхнего уровня node будут использовать эту преобразованную систему координат. Вы добавили дополнительные <g> узлы в качестве дочерних элементов этого верхнего уровня node, но они действительно ничего не делают в этом случае, потому что они не содержат атрибутов:

<g>

В результате узлы <path> все равно будут использовать одну и ту же преобразованную систему координат, которая была установлена ​​верхним уровнем <g>. Все они производят круговые сектора с вершиной в (0,0). А так как (0,0) соответствует середине области рисования в этой преобразованной системе координат, то есть там, где они заканчиваются:

<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>

Ваши узлы <text> также нарисованы в этой системе координат, но смещены на (100,100), потому что вы добавили атрибут transform, чтобы сдвинуть их на 100 пикселей вниз и 100 пикселей вправо:

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

Итак, конечный результат состоит в том, что все три ваших текстовых узла рисуются в координатах (600 375) относительно верхнего левого угла области рисования. Если вы хотите, чтобы текст появился в другом месте, вы должны указать другое смещение. Например:

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


<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>