SVGパスは、Edgeまたは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を削除

• それを修正しないと、通常の塗りつぶし
• を使用する他のパスを削除するので、これはあります唯一残っているのは
• e-xxの数字を0と置き換えます。

私は1に（エディット）-9.20934e-015を変更する場合は、SVGはむしろ賢明かつ信頼性のない（IMO）の事をやろうとしている右

Answer 1

に渡って完全によく示しています。単一の円弧パスコマンドで360度の楕円を描画します。

"-9.20934e-015"のような値は0とほぼ同じですが、ブラウザに72.0から72.0までの円を描画するように指示しているため、この値に変更することはできません。それが無効になり、サークルが消えます。とにかくそれがIEで消えるという事実は、おそらくIEが使用している浮動小数点精度によるものです。とにかくゼロに丸めるかもしれません。

したがって、その値を0ではない値で置き換える必要がありますが、元の値ほど小さくはありません。それは同じ向きを描くように、同じ記号を持つ必要があります。代わりに "-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>