SVG Text does not render in Chrome or Safari

问题

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

I have tried:

Adding padding to the svg container in case the text was being
cut-off,
Removing [xml:space="preserve'] from the text,
Adding a fill color inline.

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

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

回答1:

Use a path instead of the circle:

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

回答2:

One of the enhancements in the SVG 2 specification is that textPath elements no longer need only point to path elements. They should now be able to point to any shape. Firefox has implemented that part of the SVG 2 specification, other browsers have not yet done so.

In fairness there are parts of SVG 2 that other browsers have implemented that Firefox has not.

You can draw a circle using a path instead which will work in all browsers.

来源：https://stackoverflow.com/questions/57424958/svg-text-does-not-render-in-chrome-or-safari

标签

svg

text