Форма браузера IE11 переполняет элемент SVG

Question

Я работаю над SVG и пытаюсь создать полукруг, но браузер IE11 вместо этого создает полный круг.

Мой код такой:

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

Как я могу сделать полукруг в IE11?Он отлично работает в других браузерах.Пожалуйста, найдите ниже изображение для получения дополнительной ссылки.

В IE11:

В Chrome:

Answer 1

Быстрое решение было бы добавить overflow:hidden; в svg следующим образом:

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>

В зависимости от вашего варианта использования, «более чистым» решением было бы построить ваш полукруг с путем и командой arc :

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

Таким образом, вы уверены, что ничто не выходит за пределы элемента svg.