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>