相同宽度的 SVG 线呈现不一致

编程问答 2022-06-01

问题描述

请有人帮助我了解导致这种线宽不一致的原因。我知道有很多关于这个主题的问题，但我无法用任何一个来解决我的问题。

我制作了一个与 CSS border-image 一起使用的 SVG 边框。

这是我的 CSS：

border: 70px solid transparent;
border-image: url("src/assets/images/pixel-border.svg") round;
border-image-slice: 5;

这是我的图片：

enter image description here

这就是它在页面上的呈现方式：

enter image description here

当 SVG 与 border-image 一起使用时，您可以清楚地看到左侧和顶部边框比右侧和底部边框更粗。

Here is the reproducible example

有趣的是，SVG 与 background-image 一起使用时可以完美呈现。

Here is the codepen for that:

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

antialiasingsvg