Edge 中的 SVG 溢出不可见

Question

我在 Edge 中将 border-radius 和 padding 应用于内联 svg 时遇到了一个问题。在此特定组合中，svg 的底部被截断，无法使用 overflow:visible 显示。下图显示了 Edge 中的结果：

我设置了一个基本示例来说明此处的行为：

https://next.plnkr.co/edit/IIuU109SfZNJFDb8

要重现的示例代码：

<!doctype html>
<html>
  <head>
    <style>
     svg {
      border: 1px solid black;
      border-radius: 50%;
      padding: 40px;
      overflow: visible;
     }
    </style>
  </head>

  <body>
   <svg width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
  </body>
</html>

是否有机会像在 Chrome 或 Firefox 中一样让溢出在 Edge 中工作？

Answer 1

我会删除填充并作为补偿我会更改 viewBox="-20 -10 240 240"

     svg {
      border: 1px solid black;
      border-radius: 50%;
      overflow: visible;
     }

<svg viewBox="-20 -10 240 240" width="240" >
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Edge 中的 SVG 溢出不可见

SVG overflow in Edge not visible

css

svg

overflow

microsoft-edge