Question

我正在尝试将text中的path的水平和垂直居中位置， startOffset和text-anchor属性，但是居中不起作用。

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<svg id="line-vis" width="640" height="300" viewBox="0 0 640 300" preserveAspectRatio="none" style="cursor: pointer; overflow: visible; position: relative;">
   <g>
      <g class="line" pointer-events="none" transform="translate(365.1979064941406,134.5977783203125)">
         <path id="tooltip-line-vis" d="M120 60 L120 0 L0 0 L0 60 L54 60 L60 66 66 60" fill="#FFFFFF" stroke="#D2DBE9" transform="translate(-60,-75)" style="opacity: 1;"></path>
         <text text-anchor="middle" style="opacity: 1;">
            <textPath class="yLabelVal" xlink:href="#tooltip-line-vis" startOffset="50%" style="opacity: 1;font-size: 16px;font-weight: 500;line-height: 20px;fill: rgb(8, 40, 101);">$5,104.90</textPath>
         </text>
      </g>
      <rect width="640" height="300" fill="none" pointer-events="all"></rect>
   </g>
</svg>

Answer 1

为了得到您所需要的，我更改了路径的点。现在，路径从0,0开始。另外，我还删除了所有转换。如果您需要将路径设置在其他位置，则可以像我在代码中那样对#tooltip使用转换。

请注意文本的属性dy =“ 35”。这会将您的文字向上移动并居中。

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<svg id="line-vis" width="640" height="300" viewBox="0 0 640 300" preserveAspectRatio="none" style="cursor: pointer; overflow: visible; position: relative;">
   <g id="tooltip" transform="translate(50,10)">
      <g class="line" pointer-events="none" >
         <!--<path id="tooltip-line-vis" d="M0,60 L54,60 60,66 66,60 120,60 120,0 0,0 0,60"  stroke="#D2DBE9" style="opacity: 1;"></path>-->
        
        <path id="tooltip-line-vis" d="M0,0 L120,0 120,60 66,60 60,66 54,60 0,60 0,0"  stroke="#D2DBE9" style="opacity: 1;"></path>

         <text text-anchor="middle" style="opacity: 1;" fill="gold" dy="35">
            <textPath class="yLabelVal" xlink:href="#tooltip-line-vis" startOffset="60" >$5,104.90</textPath>
         </text>
      </g>
      <rect width="640" height="300" fill="none" pointer-events="all"></rect>
   </g>
</svg>

在SVG路径中居中文字

1 个答案: