SVG圈子笔画，IE和Firefox上的图形工件（Windows）

Question

我在尝试删除动画饼图上相当难看的神器时遇到了问题。 它在chrome上工作得非常好，只有（11或边缘）和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>

基本上我有一个蓝色的圆圈，没有中风。 在它的顶部，我有另一个蓝色圆圈，但绿色的中风。 由于js的缘故，我为中风dasharray设置了动画，以便将馅饼“填充”到给定值，从而获得动画饼图。

但正如您所看到的，非webkit浏览器存在很大问题。 我当然在css中使用几何精度。

你可以在codepen上看到我的所有代码

这里只是一个最小的SVG版本。

 svg { height: 200px; width: 200px; transform: rotate(-90deg); } circle:nth-child(1) { fill: #4d80b3; stroke-width: 0; } circle:nth-child(2) { fill: #4d80b3; stroke: #9cc374; stroke-dasharray: 0, 314.159; stroke-width: 100px; transition: stroke-dasharray 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } 

 <svg> <circle cy="100" cx="100" r="100"/> <circle cy="100" cx="100" r="50" style="stroke-dasharray: 62.8319, 314.159;"/> </svg> 

Answer 1

使用带有A的<path> ，您可以通过以下方式执行此操作：

 <svg xmlns="http://www.w3.org/2000/svg" height="210" width="210" > <g transform="scale(2) translate(51,51)"> <path style="fill:#4d80b3" d="M 0,-50 A 50,50 0 1 0 47.55,-15.45 L 0,0 z" /> <path style="fill:#9cc374" d="M 0,-50 A 50,50 0 0 1 47.55,-15.45 L 0,0 z" /> </g> </svg> 

值47.55和-15.45必须通过百分比相关角度乘以半径的sin / cos来计算（在这种情况下：20％，半径= 50）。

Answer 2

我在Windows 7上也看到了43.0.3。

你绘制饼图的方式有点像黑客。 大多数人会将馅饼行业描绘成一条充满道路的人，而不是试图用肥胖的方式来做。

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

但是我注意到如果你将stroke-width改为99px ，问题就会消失。 它在Chrome上看起来还不错。

 svg { height: 200px; width: 200px; transform: rotate(-90deg); } circle:nth-child(1) { fill: #4d80b3; stroke-width: 0; } circle:nth-child(2) { fill: #4d80b3; stroke: #9cc374; stroke-dasharray: 0, 314.159; stroke-width: 99px; transition: stroke-dasharray 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } 

 <svg> <circle cy="100" cx="100" r="100"/> <circle cy="100" cx="100" r="50" style="stroke-dasharray: 62.8319, 314.159;"/> </svg>