代码之家 › 专栏 › 技术社区 › Matt

在SVG路径中居中文本

svg

Matt · 技术社区 · 7 年前

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>

1 回复 | 直到 7 年前

enxaneta 7 年前

为了得到你需要的东西,我改变了路径的点。现在路径从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>