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 元素。