html - IE11 browser shape overflows SVG element

Question

I'm working on an SVG and trying to create half circle but the IE11 browser creates complete circle instead.

My code is like this:

<svg viewBox="0 0 80 40" class="gauge">
  <circle 
    cx="40"
    cy="40"
    r="37"
    fill="transparent"
    stroke="#d2d3d4"
    stroke-width="6"></circle>
</svg>

How can I render half circle in IE11? It is working fine on other browsers. Please find the below image for more reference.

On IE11 :

On Chrome :

标签： htmlinternet-explorersvg

Answer 1

A quick fix would be to add overflow:hidden; on the svg like so :

svg {
  overflow: hidden;
}

<svg viewBox="0 0 80 40" class="gauge">
  <circle 
    cx="40" 
    cy="40" 
    r="37" 
    fill="transparent" 
    stroke="#d2d3d4" 
    stroke-width="6"></circle>
</svg>

Depending on your use case, a "cleaner" solution would be to build your half circle with a path and the arc command :

<svg viewBox="0 0 80 40" class="gauge">
  <path d="M3 40 A37 37 0 0 1 77 40"
    fill="transparent" 
    stroke="#d2d3d4" 
    stroke-width="6" />
</svg>

This way you are sure nothing overflows the svg element.