Question

在下面的代码段中，topslice元素不会在IE或Edge中显示，但似乎在其他浏览器中显示。

如果我能做些什么来让它在这些浏览器中显示，那么有什么想法吗？

＆＃13;

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

＆＃13;

到目前为止，我已经在F12尝试了以下内容，但没有修复它

删除defs并使用普通填充
删除其他路径，这是唯一剩下的路径
用0

如果我将（。编辑）-9.20934e-015更改为1，则表明它在右边显示得非常好

Answer 1

SVG试图做一个相当不明智和不可靠（IMO）的事情。使用单个圆弧路径命令绘制360度椭圆。

虽然是＆＃34; -9.20934e-015＆＃34;实际上相当于0.将其更改为在这种情况下无法工作的情况，因为您告诉浏览器渲染一个从72.0到72.0的圆。这使得它无效，因此圆圈消失了。无论如何它在IE中消失的事实可能是由于IE正在使用的浮点精度。无论如何它可能会变为零。

因此，您需要将值替换为非零值，但也不要小于原始值。它还需要具有相同的符号，以便它以相同的方向绘制。试试＆＃34; -0.01＆＃34;代替。

＆＃13;

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

＆＃13;

SVG路径不会在Edge或IE中显示，但会在Firefox

1 个答案: