SVG Text does not render in Chrome or Safari

Question

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

I don't think all browsers support setting textPath to non-path shapes. — Anthony, Aug 09 '19 at 07:06

score 3 · Answer 1 · answered Aug 09 '19 at 07:08

3

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.

answered Aug 09 '19 at 07:08

Robert Longson

118,664
26
252
242

Oh man, that one guy has the best answer for drawing circles with paths. – Anthony Aug 09 '19 at 07:15
Robert thank you. Switching from to an equivalent has solved it. – noah scott Aug 09 '19 at 07:20

enxaneta · Accepted Answer · 2019-08-09T07:59:54.740

0

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>

edited Aug 09 '19 at 07:59

answered Aug 09 '19 at 07:12

enxaneta

31,608
5
29
42

This is perfect - how did you calculate the path? – noah scott Aug 09 '19 at 07:49
1

@noahscott See the second link in my answer there are dozens of ways to do it all documented there. – Robert Longson Aug 09 '19 at 07:58
I considered the center of the circle at x:32, y:32. The radius of the circle is 25. In order to draw the path you move to x = center.x + radius, y=center.y: `M57,32`. Next you draw an arc from the actual point. The radiuses for the arc are 25,25. The arc ends at x=center.x - radius, y=center.y: `A25,25 0 0 1 7,32` Next you draw another arc from the actual point to the starting point: `A25,25,0 0 1 57,32` – enxaneta Aug 09 '19 at 07:59
@enxaneta well explained, I will go through and amend my other shapes now. – noah scott Aug 09 '19 at 08:35
@robert-longson thank you again reading through now to substitute my other shapes. – noah scott Aug 09 '19 at 08:35

SVG Text does not render in Chrome or Safari

2 Answers2

Linked