SVG路徑不顯示在邊緣或IE中，但在Firefox中顯示

Question

在以下代碼片段中，topslice元素不顯示在IE或Edge中，但看起來似乎顯示在每個其他瀏覽器中。

任何想法，如果有什麼我可以做，讓它顯示在這些瀏覽器？

<div class="datachart" id="chartquery12337"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 188" preserveAspectRatio="xMidYMid meet"> 
 
    <g> 
 
     <g class="slices" transform="translate(144 94)"> 
 
     <defs> 
 
      <radialGradient id="gradient0" gradientUnits="userSpaceOnUse" spreadMethod="pad" cx="0" cy="0" r="180"> 
 
      <stop stop-color="rgb(94, 163, 220)" offset="0%" /> 
 
      <stop stop-color="rgb(94, 163, 220)" stop-opacity="1" offset="30%" /> 
 
      <stop stop-color="black" stop-opacity="1" offset="70%" /> 
 
      </radialGradient> 
 
     </defs> 
 
     <path class="innerslice" style="fill: rgb(44, 130, 201);" d="M -29 1.86636e-015 A 29 15.24 0 0 1 29 -3.73272e-015 L 29 30 A 29 15.24 0 0 0 -29 30 Z" /> 
 
     <path class="outerslice" style="fill: rgb(44, 130, 201);" d="M 71.5 30 A 71.5 37.1 0 0 1 -71.5 30 L -71.5 4.54344e-015 A 71.5 37.1 0 0 0 71.5 0 Z" /> 
 
     <line class="line" stroke="rgb(44, 130, 201)" x1="-57.6" y1="3.68374e-015" x2="-100.8" y2="6.44654e-015" /> 
 
     <text class="visualtext" text-anchor="end" x="-100.8" y="0" dx="-0.35em" dy="0.35em">Under Licenced 162</text> 
 
     <path class="topslice" style="fill: url(#gradient0); stroke: rgb(94, 163, 220);" d="M 72 0 A 72 37.6 0 1 1 72 -9.20934e-015 L 28.8 -3.68374e-015 A 28.8 15.04 0 1 0 28.8 0 Z" /> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
</div>

到目前爲止，我已經試過在F12以下，但沒有固定它

• 去除DEFS和使用普通填充
• 刪除其他路徑，所以這是剩下的只剩下
• 用0代替e-xx數字

如果我改變（編輯）-9.20934e-015到1它顯示了跨得很清楚所述的SVG試圖做一個相當不明智的和不可靠的（IMO）的事情的權利

Answer 1

。使用單個弧路徑命令繪製360度橢圓。

雖然諸如「-9.20934e-015」等值實際上等於0.但在此情況下將其更改爲無效，因爲您正告知瀏覽器將圓形從72.0渲染到72.0。這使得它無效，從而圓圈消失。它在IE中消失的事實可能是由於IE使用的浮點精度。無論如何，它可能是四捨五入到零。

所以你需要用一個不爲零的值替代該值，但也不會像原始值那麼小。它也需要有相同的符號，以便它以相同的方向繪製。試試「-0.01」。

<div class="datachart" id="chartquery12337"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 188" preserveAspectRatio="xMidYMid meet"> 
 
    <g> 
 
     <g class="slices" transform="translate(144 94)"> 
 
     <defs> 
 
      <radialGradient id="gradient0" gradientUnits="userSpaceOnUse" spreadMethod="pad" cx="0" cy="0" r="180"> 
 
      <stop stop-color="rgb(94, 163, 220)" offset="0%" /> 
 
      <stop stop-color="rgb(94, 163, 220)" stop-opacity="1" offset="30%" /> 
 
      <stop stop-color="black" stop-opacity="1" offset="70%" /> 
 
      </radialGradient> 
 
     </defs> 
 
     <path class="innerslice" style="fill: rgb(44, 130, 201);" d="M -29 1.86636e-015 A 29 15.24 0 0 1 29 -3.73272e-015 L 29 30 A 29 15.24 0 0 0 -29 30 Z" /> 
 
     <path class="outerslice" style="fill: rgb(44, 130, 201);" d="M 71.5 30 A 71.5 37.1 0 0 1 -71.5 30 L -71.5 4.54344e-015 A 71.5 37.1 0 0 0 71.5 0 Z" /> 
 
     <line class="line" stroke="rgb(44, 130, 201)" x1="-57.6" y1="3.68374e-015" x2="-100.8" y2="6.44654e-015" /> 
 
     <text class="visualtext" text-anchor="end" x="-100.8" y="0" dx="-0.35em" dy="0.35em">Under Licenced 162</text> 
 
       <path class="topslice" style="fill: url(#gradient0); stroke: rgb(94, 163, 220);" d="M 72 0 A 72 37.6 0 1 1 72 -0.01 L 28.8 -0.01 A 28.8 15.04 0 1 0 28.8 0 Z" /> 
 
     </g> 
 
    </g> 
 
    </svg> 
 
</div>