SVG 饼图仅适用于 Chrome，不适用于 Firefox

Question

尝试在 SVG 中生成饼图。在 Chrome 中工作正常，但在 Firefox 中不起作用。有任何想法吗？切片占馅饼的 35%。添加了 PI 来计算切片。我想我做的一切都是正确的。在 Mac 和 Windows 中尝试了最新的 Firefox。同样的结果。切片不显示。必须添加 calc() 才能进行正确的计算。

    <svg height="20" width="20" viewBox="0 0 20 20" style="width: 500px; height: auto;">
        <circle r="10" cx="10" cy="10" fill="#F2FBFF" />
        <circle r="5" cx="10" cy="10" fill="transparent" stroke="#21BAFF" stroke-width="10" stroke-dasharray="calc(35 * 31.42 / 100) 31.42" transform="rotate(-90) translate(-20)" />
    </svg>

Answer 1

Firefox 不支持在 presentation attributes 中使用 CSS 函数.您必须使用真正的 CSS 属性。

在当前状态下，表示属性是一项繁琐的业务。并非 SVG 规范和各种 CSS 规范建议的所有内容都已实现。以下是我用来确保安全的一些规则:

• 切勿将几何属性(x、y、rx、高度...)用作 CSS 属性。还没有足够的支持。
• calc() 等CSS函数只能在CSS样式规则中使用。始终添加单位。
• transform 作为属性和 transform 作为 CSS 属性被认为是具有不同语法的不同方法。 (转换中心、单位的使用、间距和逗号规则)

现在对于你的问题，你可以使用

style="stroke-dasharray:calc(35 * 31.42px / 100) 31.42px"

但请注意 px 单位的使用。没有它，Firefox 会让你失望。

<svg height="20" width="20" viewBox="0 0 20 20" style="width: 500px; height: auto;">
        <circle r="10" cx="10" cy="10" fill="#F2FBFF" />
        <circle r="5" cx="10" cy="10" style="fill:transparent;stroke:#21BAFF;stroke-width:10;stroke-dasharray:calc(35 * 31.42px / 100) 31.42px" transform="rotate(-90) translate(-20)" transform="rotate(-90) translate(-20)" />
    </svg>