SVG：边缘到边缘的黑色形状之间的无意白色边缘答案

【问题标题】：SVG: inadvertent white edges between black shapes that are edge to edgeSVG：边缘到边缘的黑色形状之间的无意白色边缘
【发布时间】：2016-03-30 15:38:46
【问题描述】：

我想创建一个 svg 文件，它恰好有平行的黑色方块，它们彼此相邻并且它们之间没有空间。我创建了一个简单的 svg 文件，如下所示：

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="400">
  <path d="M150 0 L200 0 200 100 L150 100 Z" />
  <path d="M200 0 L250 0 250 100 L200 100 Z" />
</svg>

</body>
</html>

当您放大/缩小时，有时会在两个黑色矩形之间呈现一条细白线，即使它不应该如此。不是，有一条真正定义的白线，但是您可以看到两个黑色矩形是分开的，事实并非如此。生成的图像应该看起来像一个独立于缩放级别的黑色正方形。

在我测试的每个渲染器（Adobe Illustrator、Inkscape、Firefox）中都是如此。嵌入代码在http://www.w3schools.com/svg/#进行了测试

我已经搜索了该问题，但在其他任何地方都找不到有关此问题的描述。

这真的是渲染问题还是我遗漏了什么？

【问题讨论】：

在 Windows 上的 Chrome 和 Firefox 中看起来不错
我澄清了我的帖子。白线很细，仅在某些缩放级别上显示。不是，有一条真正定义的白线，但是您可以看到两个黑色矩形是分开的，事实并非如此。生成的图像应该看起来像一个独立于缩放级别的黑色正方形。
它是抗锯齿的，并且是预期的。您可以通过形状渲染将其关闭：crispEdges
嗨罗伯托，你能回答这个问题，更重要的是把需要的代码放在我的示例代码中吗？谢谢！ =)

标签： svg render

【解决方案1】：

这是一个渲染问题。根据您用于查看的软件，会显示白线，并且可以随着缩放级别的变化而变化。即使在打印时也会出现这些白线。我将 svg 文件保存为 pdf（存在相同的工件）并对其进行校对。在校对过程中，没有人工制品。

【讨论】：

【解决方案2】：

解决方案是将两条路径合并为一条：

<path d="M150 0 L200 0 200 100 L150 100 Z M200 0 L250 0 250 100 L200 100 Z" />

其他解决方案是禁用抗锯齿（只要您只有 H、V 或 45 度线），或在路径中添加足够宽的黑色描边。

完整讨论： https://stackoverflow.com/a/46249899/6050364

【讨论】：