Javascript SVG圆形笔划上的图形工件，仅限IE和Firefox（Windows）

我在尝试移除动画饼图上一个相当丑陋的工件时遇到问题。它在chrome上运行得非常好，只有ie（11或edge）和firefox似乎有问题

让我们从一个屏幕截图开始，您将立即看到问题所在：

丑陋的firefox版本：

完美的Chrome版本：

正如你所看到的，Firefox上有一个非常奇怪的图形错误。我无法理解渲染引擎为什么要这样做

编辑：请注意，它与笔划宽度/svg元素维度有某种关联

让我解释一下这里到底发生了什么：

<figure id="pie" data-percentage="20" data-behavior="pie-chart">
  <svg>
    <!-- Radius has to be svg diameter divided by 4 -->
    <!-- Cx and cy have to be svg diameter divided by 2 -->
    <circle r="100" cx="100" cy="100"/>
    <circle r="50" cx="100" cy="100"/>
  </svg>
  <div class="receiver"></div>
</figure>

---

我在Windows 7的43.0.3上也看到了这一点

你画饼图的方式有点老套。大多数人会把馅饼区画成一条填满的路径，而不是试图用粗笔画出来

话虽如此，它看起来确实像FF中的一个bug。你应该

但是，我注意到，如果将

笔划宽度

更改为

99px

，问题就会消失。而且在Chrome上看起来还不错

svg{
高度：200px；
宽度：200px；
变换：旋转（-90度）；
}
圆圈：第n个孩子（1）{
填充：#4d80b3；
笔画宽度：0；
}
圈：第n个孩子（2）{
填充：#4d80b3；
行程：#9cc374；
笔划数组：0314.159；
笔划宽度：99px；
过渡：笔划阵列2000ms立方贝塞尔（0.215,0.61,0.355,1）0s；
}

---

我在Windows 7的43.0.3上也看到了这一点

你画饼图的方式有点老套。大多数人会把馅饼区画成一条填满的路径，而不是试图用粗笔画出来

话虽如此，它看起来确实像FF中的一个bug。你应该

但是，我注意到，如果将

笔划宽度

更改为

99px

，问题就会消失。而且在Chrome上看起来还不错

svg{
高度：200px；
宽度：200px；
变换：旋转（-90度）；
}
圆圈：第n个孩子（1）{
填充：#4d80b3；
笔画宽度：0；
}
圈：第n个孩子（2）{
填充：#4d80b3；
行程：#9cc374；
笔划数组：0314.159；
笔划宽度：99px；
过渡：笔划阵列2000ms立方贝塞尔（0.215,0.61,0.355,1）0s；
}

使用

和

a

可以通过以下方式完成：

使用

和

a

可以通过以下方式完成：

对于Firefox 41的价值，我看不出这个问题。（或Firefox43）。也许你使用的是旧版本的firefox，它有一个bug现在已经修复了？嗨，你确定吗？也许百分比隐藏了问题。我删除了codepen上的百分比以避免出现这种情况。我还删除了%。这很奇怪，我有FF 43.0.2，而且这个问题很明显。我在MacOS X上-可能是不同操作系统的问题？对于Firefox 41的价值，我没有看到这个问题。（或Firefox43）。也许你使用的是旧版本的firefox，它有一个bug现在已经修复了？嗨，你确定吗？也许百分比隐藏了问题。我删除了codepen上的百分比以避免出现这种情况。我还删除了%。这很奇怪，我有FF 43.0.2，而且这个问题是显而易见的。我在MacOS X上-可能是不同操作系统的问题？是的，99px笔划宽度的问题是填充颜色和基色之间的间距很小（显然）。所以这不是一个理想的解决方案，但如果没有其他方法，它很可能就是我选择的。至于使用我没有尝试过的路径解决方案，可能需要比当前版本更多的js，但我不确定（以前从未真正做过类似的事情）该解决方案还有另一个bug，stroke dasharray动画在某些部分会变得非常紧张。尝试用99px宽度笔划在我的代码笔上加载一个90%的圆圈，你应该会体验到。是的，99px笔划宽度的问题是填充颜色和基色之间的间距很小（显然）。所以这不是一个理想的解决方案，但如果没有其他方法，它很可能就是我选择的。至于使用我没有尝试过的路径解决方案，可能需要比当前版本更多的js，但我不确定（以前从未真正做过类似的事情）该解决方案还有另一个bug，stroke dasharray动画在某些部分会变得非常紧张。试着用99px的宽度笔划在我的代码笔上加载一个90%的圆，你应该会体验到它的弯曲，这也意味着每次我超过50%（180°）时，我必须更改路径参数（扫描标志，大圆弧标志）？因为如果我不这样做，弧线就不会像我想的那样了？还需要反转看起来的x-y值。例如，我想要一个90%的馅饼，在这种情况下，我需要将cos（565487）*50反转为负值（-40.45），是的，不幸的是这是真的。这两个标志是我们为在路径语法中省略弧的中心坐标而付出的代价。我理解，是的。现在还不太确定如何设置动画，但它肯定比带有css3 TransitionAnks的简单笔划dasharray更难，因此这也意味着每次超过50%（180°）时，我必须更改路径参数（扫掠标志、大圆弧标志）？因为如果我不这样做，弧线就不会像我想的那样了？还需要反转看起来的x-y值。例如，我想要一个90%的馅饼，在这种情况下，我需要将cos（565487）*50反转为负值（-40.45），是的，不幸的是这是真的。这两个标志是我们为在路径语法中省略弧的中心坐标而付出的代价。我理解，是的。还不太确定我将如何设置它的动画，但它肯定比带有css3转换的简单笔划数组更难