完美的 SVG 路径？答案

【问题标题】：Perfect SVG Paths?完美的 SVG 路径？
【发布时间】：2016-05-28 01:43:09
【问题描述】：

我尝试制作一个简洁的短代码 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

【问题讨论】：

标签： svg vector graphics adobe-illustrator

【解决方案1】：

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

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

有两种解决方案。

组合多边形
在最新的 Illustrator 中 -> 文件 -> 导出 -> 选择 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>

【讨论】：

浏览器在这里四舍五入没有问题。这是抗锯齿，是意料之中的。
谢谢，但这个解决方案听起来很脏=/我现在用这个修复它......但我希望下次能找到更好的方法;)