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制作动画，以便填充＆＃34;馅饼达到给定值，即动画饼图。

但是你可以看到非webkit浏览器存在很大问题。 我当然在css中使用几何精度。

You can see all my code on the codepen

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将<path>与A一起使用，您可以通过以下方式执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

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

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

但请注意，如果您将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>