Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

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

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: Missing text on Safari Rendering fine on Chrome

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...