Question

在将边界半径和填充应用于嵌入式svg时，我在Edge中遇到了一个问题。在这种特定的组合中，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溢出不可见

1 个答案: