CODEWITHSUNDEEP
svgtext
noah scott
noah scott

Reputation: 33

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:

<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

Upvotes: 3

Views: 1020

Answers (2)

enxaneta
enxaneta

Reputation: 33024

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>

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123985

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.

Upvotes: 4

Related Questions