Question

嘿伙计们试图使用ie功能或bug，但它适用于我的解决方案。

在IE中如果我有一个较小的svg和一条较大的折线，折线显示在svg边缘。

相同的代码在其他浏览器上不起作用，我需要理解为什么只适用于IE。

我可以更改任何css或js以设置所有浏览器以使结果相等，即

以下是代码，在IE上运行并在其他浏览器上运行，您只能查看ie中的行并且是我需要的。

＆＃13;

svg
{
    border: solid 1px red;  margin: 40px 40px 20px 20px;    
}

＆＃13;

<!DOCTYPE html> <html> <style> svg { border: solid 1px red; margin: 40px 40px 20px 20px; } </style> <body> <svg height="20" width="50"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180 200,-10" style="fill:none;stroke:black;stroke-width:3" /> </svg> </body> </html>

＆＃13;

看到只有IE在边缘上划线。

Answer 1

为svg元素设置样式overflow: visible;应该会有所帮助。

有关规则的详细信息，请参阅SVG overflow规范。如果overflow: hidden;元素不是独立文档的根目录，则<svg>由符合标准的浏览器样式表设置。

请注意，您仍然需要处理所有父元素的溢出规则。

SVG折线绘制限制

1 个答案: