Question

我很想知道为什么我的文字没有显示出来。在我问这个之前，我还没有看到它现在可以像在Firefox中那样工作。

<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
    <circle id="circ0-0" cx="0" cy="0" r="121" stroke="#58595B" stroke-width="3" fill="transparent" style="transform: rotate(90deg)">
    </circle>
    <text class="donutText" dy="0">
        <textPath startOffset="50%" xlink:href="#circ0-0" style="text-anchor: start;">Test test test.</textPath>
    </text>
</svg>

这可以在所有浏览器中完成吗？

Answer 1

似乎在所有浏览器中，textPaths都不能在圆圈上运行。仅在实际路径上，例如：

 <svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
    <path id="circ0-0" d="M 0 0 m -121, 0 a 121,121 0 1,0 242,0 a 121,121 0 1,0 -242,0"  stroke="black" stroke-width="3" fill="white" style="transform: rotate(180deg)">
    </path>
    <text class="donutText" dy="0">
        <textPath startOffset="50" xlink:href="#circ0-0" style="text-anchor: middle;">Test test test.</textPath>
    </text>
</svg>

Answer 2

使用defs（复制路径，例如圆圈）

好吧，我确定了答案，并使用defs定义了另一个类似于圆的路径，更改路径“圆”的半径非常容易（例如将所有125改为100，将250改为200）。 >

所以，这就像只使用路径。.但是在defs中使用circle和路径是有好处的

顺便说一句，您可以通过更改dx="0"

来更改路径的开始

<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
    <g>
      <defs>
        <path d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
      </defs>
      <circle stroke="#58595B" stroke-width="3" fill="transparent" cx="0" cy="0" r="128"/>
      <text dx="0">
        <textPath xlink:href="#path-circle">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test</textPath>
      </text>
    </g>
</svg>

通过评论更新

我发现这种方式取决于您的需求，只有路径才是真正好的解决方案！

使用defs（路径）的优点是：

路径圆并不总是准确的-绿色圆（实际上是路径），因此，如果我们要显示圆，则可以使用圆并以文本形式输入defs中的路径。
当我们希望文本以凹/凸形式书写时，我们需要使用路径，但路径并不总是圆的。（即当您要显示圆形但对于文本使用其他形状时）
对我来说，它更具可读性，例如，如果我看到该代码，我就知道有一个圆，并且文本呈路径形状，相比之下，看到的是路径和文本。

<svg style="background-color: white" viewBox="-150 -150 300 300" width="300" height="300">
    <g>
<!--       <defs>
        <path d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
      </defs> -->
<!--       <circle stroke="#58595B" stroke-width="3" fill="transparent" cx="0" cy="0" r="128"/> -->
      <path stroke="#58595B" stroke-width="3" fill="transparent" d="M 0 0 m -125 0 a 125 125 0 1 0 250 0 a 125 125 0 1 0 -250 0" id="path-circle" />
      <path stroke="green" stroke-width="3" fill="transparent" 
            d="M0,-62c34,0,63,28,62,62s-28,62-62,62s-62-28-62-62S-34,-62,0,-62z" id="path-circle2"
            transform="rotate(-45)"/>
      <circle stroke="blue" stroke-width="3" fill="transparent" cx="0" cy="0" r="50"/>
      <text dx="0" dy="-4">
        <textPath xlink:href="#path-circle">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test</textPath>
      </text>
       <text dx="0" dy="-4">
        <textPath xlink:href="#path-circle2">Test2 test2 test2</textPath>
      </text>
    </g>
</svg>

为什么我的文本路径不在此圆圈渲染上？

2 个答案:

使用defs（复制路径，例如圆圈）