SVG text doesn't render on Safari, but renders on Chrome

Question

I have some and SVG component that has text in the center - this text renders perfectly fine on Chrome, but just doesn't appear on Safari. Here are the differences between the 2 browsers:

I'm not sure what the issue is. How can I resolve this?

Here's a link to the code: https://codepen.io/iamegamind/pen/bGwmpVg?editors=1100

I've done this using the following code:

<svg style="width: 250px; height: 250px"
            viewBox="0 0 150 120"
            class="progress-card"
            xmlns="http://www.w3.org/2000/svg">

    <circle style=" stroke-dasharray: 339.29; stroke-dashoffset: 439.29; stroke-width: 8"
                r="40"
                cx="50%"
                cy="50%"/>

        <text class="title" x="63" y="50">
            <tspan text-anchor="middle" alignment-baseline="central">
                Your credit score
            </tspan>
        </text>

        <text class="score" x="63" y="65" text-anchor="middle" alignment-baseline="central">
            510
        </text>

        <text class="status" style="fill: rgb(2, 171, 118)" x="63" y="85" text-anchor="middle" alignment-baseline="central">
            Excellent!
        </text>

        <text class="min" x="30" y="105" text-anchor="middle" alignment-baseline="central">
            0
        </text>

        <text class="max" x="95" y="105" text-anchor="middle" alignment-baseline="central">
            710
        </text>
</svg>

Answer 1

Safari is hit or miss on supporting certain CSS properties on certain SVG sub-elements. In this case, it's the transform on the SVG text element that it's freaking out about. If you remove it, it will render just fine.

While you could add SVG transforms on the text element, my recommendation might be to not to put a rotate transform on the SVG element class, but instead put the rotate transform on a g element wrapping the circles within the SVG (why do you need two SVG elements btw?). Then position the text using x,y without the need to reverse the transform on the SVG element itself.