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

一种快速的解决方法是在svg上添加overflow:hidden;，像这样：

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

这样，您可以确保svg元素不会溢出。