时间戳

首页 > 解决方案 > 在 SVG 路径元素上居中文本的最佳方法是什么？

css - 在 SVG 路径元素上居中文本的最佳方法是什么？

问题描述

我最近发现了s 的alignment-baselineandtext-anchor样式，SVG Text Element但由于某种原因，这些属性似乎不适用于SVG Path Elements。

我希望在下面的示例中以某种方式将测试文本居中，而不使用 javascript 来设置上述文本元素的“x”和“y”值。

<svg width="600" height="600">
  
  <!--   Ellipse -->
  <g transform="translate(120,140)">
    <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>

<g>
  <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z" fill="#ddd" stroke="#ddd"></path>
  <text style="font-size: 24px;" text-anchor="middle" alignment-baseline="middle" href="#p1">
test text
  </text>
  </g>
  
  
</svg>

[编辑]：感谢@Gerarod Furtado 的澄清。我的目标是将文本集中在形状上，而不是像@chrwahl 的答案那样让文本遵循路径。

总之，如果没有 javascript，在 svg 路径上居中文本似乎是不可能的。

标签： csssvg

解决方案

在这里，我有一个示例，<textPath>其中text-anchor位于中间，dominant-baseline位于中间，并且startOffset位于路径的 50% 处。这会将文本放在中间。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <path id="p1" fill="none" stroke="red"
    d="M 10,50 C 40,40 50,30 60,30 S 70,40 90,50" />
  <text font-size="6">
    <textPath startOffset="50%" text-anchor="middle"
      dominant-baseline="middle" href="#p1">Text on path</textPath>
  </text>
</svg>

另一种方法是使用pathLength(here 2) on <path>，然后根据此调整startOffset(here 1) on <textPath>。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <path id="p1" fill="none" stroke="red" pathLength="2"
    d="M 10,50 C 40,40 50,30 60,30 S 70,40 90,50" />
  <text font-size="6">
    <textPath startOffset="1" text-anchor="middle"
      dominant-baseline="middle" href="#p1">Text on path</textPath>
  </text>
</svg>

推荐阅读