CODEWITHSUNDEEP
htmlsvg
user2728841
user2728841

Reputation: 1427

SVG Path does not show in Edge or IE, but does show in Firefox

In the following snippet, the topslice element doesn't show in IE or Edge, but does seem to show in every other browser.

Any ideas if there's anything I can do to make it show in these browsers? 

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

So far I've tried the following in F12 but none fixed it

If I change (edit) -9.20934e-015 to 1 it shows perfectly well across to the right

Upvotes: 0

Views: 579

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

The SVG is trying to do a rather unwise and unreliable (IMO) thing. Draw 360 degree ellipses with a single arc path command.

Although a value such as "-9.20934e-015" is virtually equivalent to 0. Changing it to that won't work in this case, because you are then telling the browser to render a circle from 72.0 to 72.0. Which makes it invalid and thus the circle disappears. The fact that it disappears in IE anyway is probably due to floating point precision that IE is using. It may be rounding to zero anyway.

So you need to replace that value with a value that is not zero, but is also not as small as the original value. It also needs to have the same sign, so that it draws with the same orientation. Try "-0.01" instead.

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

Upvotes: 1

Related Questions