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 不支持在表示属性中使用 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 会让你失望。

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