SVG 文本不在 Safari 上呈现，但在 Chrome 上呈现答案

【问题标题】：SVG text doesn't render on Safari, but renders on ChromeSVG 文本不在 Safari 上呈现，但在 Chrome 上呈现
【发布时间】：2021-04-17 11:56:41
【问题描述】：

我有一些 SVG 组件，其中心有文本 - 该文本在 Chrome 上呈现得非常好，但在 Safari 上却没有。两种浏览器的区别如下：

我不确定是什么问题。我该如何解决这个问题？

这是代码的链接： https://codepen.io/iamegamind/pen/bGwmpVg?editors=1100

我已使用以下代码完成此操作：

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

【问题讨论】：

您可以将问题报告给webkit bugtracker

标签： google-chrome svg safari

【解决方案1】：

Safari 在支持某些 SVG 子元素上的某些 CSS 属性时受到打击或错过。在这种情况下，它吓坏了 SVG 文本元素上的转换。如果你删除它，它会渲染得很好。

虽然您可以在文本元素上添加 SVG 变换，但我的建议可能是不要在 SVG 元素类上放置旋转变换，而是将旋转变换放在围绕 SVG 内的圆圈的 ag 元素上（为什么顺便说一句，需要两个 SVG 元素？）。然后使用 x,y 定位文本，无需反转 SVG 元素本身的变换。

【讨论】：