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>

Answer 1

很难看出你遇到麻烦的哪一部分，但我会尽力解释。

您的SVG图片宽1000像素，高550像素：

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

此SVG中的顶级节点是<g>节点，它将坐标系的原点从左上角移动到（500,275）（即绘图区域的中间; Y坐标从顶部增加）在SVG中的底部）

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

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

SVG相对于父<g> </g>的位置文本

1 个答案: