完美的 SVG 路径？

Question

我尝试制作一个清晰的短代码 SVG 图形...但我每次都会遇到难看的边框...

代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 370 192" xml:space="preserve">
<polygon class="shape1" points="0 158 0 0 160 0 258 90 "/>
<polygon class="shape2" points="370 192 370 0 160 0 "/>
</svg>

我现在尝试在 Adome Illustrator 中手动编辑协调...但是没有机会...=/ 也许有人有想法？

在这里你可以看到我有围绕 SVG 的边框：http://i.imgur.com/sJpvDL2.png

Answer 1

浏览器在坐标方面存在一些舍入问题，这就是为什么会出现那些小白线的原因。

要防止侧面出现白线，您可以使用出血，下面的示例不包含出血。

有2个解。

合并多边形
在最新的 Illustrator 中 -> 文件 -> 导出 -> Select SVG 格式

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 370 192" xml:space="preserve">
<polygon class="shape1" points="0 158 0 0 370 0 370  192 258 90 "/>
</svg>

使多边形相互重叠

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 370 192" xml:space="preserve">
<polygon class="shape1" points="0 158 0 0 370 0 370  192 258 90 "/>
<polygon class="shape2" points="370 192 370 0 160 0 "/>
</svg>

完美的 SVG 路径？

Perfect SVG Paths?

graphics

svg

vector

adobe-illustrator