SVG：防止相邻多边形之间出现透明间隙

Question

SVG：防止相邻多边形之间出现透明间隙

17

请考虑以下小的 SVG，展示了两个相邻的三角形：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
   <polygon points="10,0  60,0  35,50" style="fill:#cc4444;"/>
   <polygon points="35,50 85,50 60,0" style="fill:#cc3333;"/>
</svg>

这在我的浏览器中呈现如下

svg

请注意多边形之间的白线。虽然我知道这是混合使用的原因，但当您尝试呈现像这里所示的数学表面时，这种行为非常令人恼火。

在SVG中，如何正确解决这些间隙？一种方法是使用相同颜色的小stroke给多边形描边，但我认为这更像是一种hack方法，并且在具有大量多边形的图形中，它会显着增加文件大小。

- halirutan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- r3mainer · Accepted Answer

添加shape-rendering="crispEdges"到<svg>标签中可以解决问题，但会在所有地方产生锯齿状的边缘。如果这是一个问题，您可以尝试将绘图元素通过滤镜渲染成光栅图像。然而，这并不能完全解决问题，如果您正在对图形进行动画处理，可能会使速度变慢一些。您唯一的其他选择是向您的多边形添加描边，就像您建议的那样，或者只需使多边形稍微大一些，以便它们重叠。

<!-- Standard SVG -->
<svg width="180" height="180" viewBox="0 0 180 180">
<g transform="translate(90,90)">
<path d="M0 0 0.00 -90.00 70.36 -56.11Z" fill="#323232" />
<path d="M0 0 70.36 -56.11 87.74 20.03Z" fill="#4b4b4b" />
<path d="M0 0 87.74 20.03 39.05 81.09Z" fill="#646464" />
<path d="M0 0 39.05 81.09 -39.05 81.09Z" fill="#7d7d7d" />
<path d="M0 0 -39.05 81.09 -87.74 20.03Z" fill="#969696" />
<path d="M0 0 -87.74 20.03 -70.36 -56.11Z" fill="#afafaf" />
<path d="M0 0 -70.36 -56.11 0.00 -90.00Z" fill="#c8c8c8" />
</g>
</svg>

<!-- Crisp edges -->
<svg width="180" height="180" viewBox="0 0 180 180" shape-rendering="crispEdges">
<g transform="translate(90,90)">
<path d="M0 0 0.00 -90.00 70.36 -56.11Z" fill="#323232" />
<path d="M0 0 70.36 -56.11 87.74 20.03Z" fill="#4b4b4b" />
<path d="M0 0 87.74 20.03 39.05 81.09Z" fill="#646464" />
<path d="M0 0 39.05 81.09 -39.05 81.09Z" fill="#7d7d7d" />
<path d="M0 0 -39.05 81.09 -87.74 20.03Z" fill="#969696" />
<path d="M0 0 -87.74 20.03 -70.36 -56.11Z" fill="#afafaf" />
<path d="M0 0 -70.36 -56.11 0.00 -90.00Z" fill="#c8c8c8" />
</g>
</svg>

<!-- Null filter -->
<svg width="180" height="180" viewBox="0 0 180 180">
<defs>
<filter id="null">
<feBlend mode="normal" in="SourceGraphic"/>
</filter>
</defs>
<g transform="translate(90,90)" filter="url(#null)">
<path d="M0 0 0.00 -90.00 70.36 -56.11Z" fill="#323232" />
<path d="M0 0 70.36 -56.11 87.74 20.03Z" fill="#4b4b4b" />
<path d="M0 0 87.74 20.03 39.05 81.09Z" fill="#646464" />
<path d="M0 0 39.05 81.09 -39.05 81.09Z" fill="#7d7d7d" />
<path d="M0 0 -39.05 81.09 -87.74 20.03Z" fill="#969696" />
<path d="M0 0 -87.74 20.03 -70.36 -56.11Z" fill="#afafaf" />
<path d="M0 0 -70.36 -56.11 0.00 -90.00Z" fill="#c8c8c8" />
</g>
</svg>