Css 边缘中的SVG溢出不可见_Css_Svg_Overflow_Microsoft Edge

Css 边缘中的SVG溢出不可见

css svg

Css 边缘中的SVG溢出不可见,css,svg,overflow,microsoft-edge,Css,Svg,Overflow,Microsoft Edge,在将边框半径和填充应用于内联svg时，我在Edge中遇到了一个问题。在这种特定的组合中，svg的底部被切断，无法使用overflow:visible显示。下图显示了边缘中的结果：我在这里设置了一个基本示例来说明这种行为：要复制的示例代码： <!doctype html> <html> <head> <style> svg { border: 1px solid black; border-rad

在将边框半径和填充应用于内联svg时，我在Edge中遇到了一个问题。在这种特定的组合中，svg的底部被切断，无法使用overflow:visible显示。下图显示了边缘中的结果：

我在这里设置了一个基本示例来说明这种行为：

要复制的示例代码：

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


svg{
边框：1px纯黑；
边界半径：50%；
填充：40px；
溢出：可见；
}

是否有可能让溢出以与Chrome或Firefox相同的方式在Edge中工作？

我会删除填充，并更改

viewBox=“-20-10 240”

svg{
边框：1px纯黑；
边界半径：50%；
溢出：可见；
}

如果不重复则相关-这肯定有效，但对我来说更像是猜测。为什么x和y位置不同？x和y位置是什么？你指的是查看框吗？是的，对不起。。。视图框的x和y位置。不管怎样，我举的例子没有相同的高度和宽度。你可能知道，罪魁祸首是填充物。如果我删除填充，我需要使svg更大。例如，如果您有一个

viewBox=“0 0 200 200”

，并且需要将其放大10，您将把viewBox更改为

-10-10 220

。在你的例子中，在增加额外的空间后，星星没有居中，所以我把它向上移动