我需要相对于父<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>
最佳答案
很难看出您在哪一部分遇到了麻烦,但是我会尽力解释。
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>的SVG位置文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26400986/