SVG饼图只能在Chrome中使用，不能在Firefox中使用 [英] SVG pie-chart working only in Chrome, not in Firefox

问题描述

尝试在SVG中生成拼图。在Chrome上运行得很好，但在Firefox上就不行了。有什么主意吗？这块馅饼占整个馅饼的35%。添加PI以计算切片。我想我做的每件事都是正确的。在Mac和Windows上试用了最新的Firefox。结果是一样的。Slice没有出现。必须添加calc()才能正确计算。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

推荐答案

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将使您失败。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

这篇关于SVG饼图只能在Chrome中使用，不能在Firefox中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！