IE11 浏览器形状溢出 SVG 元素

【问题标题】：IE11 browser shape overflows SVG elementIE11 浏览器形状溢出 SVG 元素
【发布时间】：2019-09-02 02:42:37
【问题描述】：

我正在处理 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 上：

【问题讨论】：

overflow="hidden" 在

标签： html internet-explorer svg

【解决方案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 元素。

【讨论】：