相对于父级< g>的SVG位置文本 [英] SVG Position text relative to parent <g>

问题描述

我需要相对于父级<g>放置文本.

I need to place text relative to the parent <g>.

当前，我有一个路径和一个包含在<g>中的文本元素.但是所有文本坐标都相对于最外面的<g>.

Currently, I have a path and a text element wrapped in a <g>. But all the text coordinates are relative to the outer most <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>

推荐答案

很难看到您在哪一部分遇到了麻烦，但我会尽我所能解释.

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

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

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

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

此SVG内的顶级节点是<g>节点，它将坐标系的原点从左上角移动到(500,275)(即绘图区域的中间； Y坐标从上到下增加)在SVG中)

The top level node inside this SVG is a <g> 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)

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

因此，此顶级节点的所有子代都将使用此变换后的坐标系.您已经添加了其他<g>节点作为该顶级节点的子级，但是由于它们不包含任何属性，因此在此实例中它们实际上并没有做任何事情:

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

<g>

结果，<path>节点仍将使用由顶级<g>设置的相同变换坐标系.这些都产生圆形扇区，其顶点为(0,0).并且由于(0,0)对应于此变换后的坐标系中绘图区域的中间，所以它们最终会在这里结束:

As a result, the <path> nodes will still be using the same transformed coordinate system that was set up by the top-level <g>. 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:

<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个像素:

Your <text> 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 transform="translate(100, 100)" ... >text</text>

因此最终结果是，所有三个文本节点均相对于绘图区域的左上角在(600,375)坐标处绘制.如果希望文本显示在其他位置，则需要指定其他偏移量.例如:

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

这篇关于相对于父级< g>的SVG位置文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！