SVG 文本不会在 Chrome 或 Safari 中呈现 [英] SVG Text does not render in Chrome or Safari

问题描述

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

I have some SVG text that works fine on Firefox but in Chrome and Safari does not appear.

我试过了:

• 为 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 中无效

I expect the text to render as it does in Firefox, but to no avail in Chrome and Safari

推荐答案

使用路径代替圆圈:

<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>

这篇关于SVG 文本不会在 Chrome 或 Safari 中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！