SVG圓形筆畫，僅限IE和Firefox的圖形工件（Windows）

Question

我在試圖刪除動畫餅圖上相當醜陋的工件時遇到了問題。它在Chrome上運行得非常好，只有（11或邊緣）和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> 

基本上我有一個藍色的圓圈，沒有中風。最重要的是，我有另一個藍色的圓圈，但有一個綠色的中風。爲了將餅圖「填充」到一個給定的值，我使用了js的動畫dasharray，因此是動畫餅圖。

但是正如您所看到的，非webkit瀏覽器存在一個大問題。 我在css中使用當然的幾何精度。

You can see all my code on the 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

我在43.0.3在Windows 7上也看到這一點。

你正在繪製餅圖的方式有些詭異。大多數人會把餡餅部門當成一條滿載的道路，而不是用肥胖的中風去做。

話雖如此，它看起來像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>

Answer 2

使用<path>與A你可以做下列方式：

<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將不得不計算由與百分比相關的角度乘以半徑（在這種情況下：20％，半徑= 50）的sin/cos的裝置。