考虑以下显示两个相邻三角形的小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>
这在我的浏览器中呈现如下
注意多边形之间的白线。尽管我知道使用混合是原因,但是当您尝试渲染例如here这样的数学曲面时,此行为非常令人讨厌。
SVG内弥合这些差距的正确解决方案是什么?一种方法是给多边形一个带有相同颜色的小
stroke
,但这对我来说似乎更像是一种技巧,并且在具有大量多边形的图形中,它会明显增加文件的大小。
最佳答案
在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>
关于SVG:防止相邻多边形之间的透明间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47451435/