SVG 文本不会在 Chrome 或 Safari 中呈现

Question

我有一些 SVG 文本在 Firefox 上运行良好，但在 Chrome 和 Safari 中没有出现。

我试过了：

• 将填充添加到 svg 容器以防文本被
  隔断，
• 从文本中删除 [xml:space="preserve']，
• 添加内联填充颜色。

<svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="transparent"/>
    <text class="spinner-text spinner-text__casestudy" xml:space="preserve">
        <textPath xlink:href="#CS1_01-intro">Longform  case  study</textPath>
    </text>
</svg>

我希望文本能够像在 Firefox 中一样呈现，但在 Chrome 和 Safari 中无效

Answer 1

SVG 2 规范中的一项增强功能是 textPath 元素不再需要仅指向路径元素。 他们现在应该能够指向任何形状。 Firefox 已经实现了 SVG 2 规范的那一部分，其他浏览器还没有这样做。

公平地说，其他浏览器已经实现了 SVG 2 的某些部分，而 Firefox 没有。

您可以使用适用于所有浏览器的路径来绘制圆。

Answer 2

使用路径而不是圆圈：

 <svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--<circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="rgba(0,0,0,.3)"/>--> <path id="CS1_01-intro" d="M57,32A25,25 0 0 1 7,32 A25,25,0 0 1 57,32z" /> <text class="spinner-text spinner-text__casestudy" font-size="16" fill="black"> <textPath xlink:href="#CS1_01-intro">Longform case study</textPath> </text> </svg>