SVG如何相对于父元素<g>定位文本？

Question

我需要将文本放置在父级<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>

- CharliePrynn

---

我的假设是文本坐标将相对于父组。这个SVG是使用D3绘制的，因此有很多小数位。这可以四舍五入。 - CharliePrynn

你的假设是正确的。父组件都位于(500,275)。 - r3mainer

好的，我还是有点困惑。你能给我一个修复这个问题的例子吗？ - CharliePrynn

@RobertLongson 第一次使用SVG。我很困惑为什么文本元素的坐标不是相对于父组的。正如squeamishossifrage所解释的那样，这与最外层组的变换有关。虽然如此，我仍然很难理解如何将文本定位相对于父组。 - CharliePrynn

你的问题类似于这个……假设你问为什么你的猫不是黑色的。我们其他人看着你的猫，我们都看到一只黑猫。我们说我们不明白，你已经有一只黑猫了。你说，是的，但我想改变我的猫，让它变成黑色的。你需要接受你的问题前提是错误的，并解释为什么你认为你有一只黑猫。 - Robert Longson

Answer 1

很难看出你对这部分有哪些困难，但我会尽力解释。

你的SVG图片宽度为1000像素，高度为550像素：

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

该SVG文件中最顶层的节点是一个<g>节点，该节点将坐标系的原点从左上角移动到(500,275)（即绘图区域的中心点；在SVG中，Y坐标向下增加）。

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

因此，该顶级节点的所有子代将使用这个转换后的坐标系。您已经添加了额外的<g>节点作为该顶级节点的子代，但在这种情况下它们实际上并没有发挥任何作用，因为它们不包含任何属性：

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

由于您添加了 transform 属性将它们向下偏移100像素并向右偏移100像素，因此您的 <text> 节点也会在此坐标系中绘制，但会被偏移 (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>

- r3mainer