SVG中六边形之间的空间答案

【问题标题】：Space between hexagons in SVGSVG中六边形之间的空间
【发布时间】：2012-07-28 15:25:39
【问题描述】：

我尝试在 SVG 中制作一些基于六边形的地图。不幸的是，字段之间有空格。

我禁用了字段的边框（stroke="none stroke-width="0"），将所有浮点四舍五入为整数，并确保六边形有共同点（它们之间没有空格）。它没有帮助.

两张截图以不同的放大倍数显示相同的 SVG http://imgur.com/GLiJs,gi3pt

源码在这里：http://pastebin.com/hqwTKW4M（下载后记得把扩展名改成svg）。

【问题讨论】：

我使用 Firefox (14.0.1)、Opera (12.00) 和 Chromium (22.0.1197)，但没关系。我知道这是 SVG 渲染引擎的问题。在 SVG 规范中，我找到了有关形状渲染属性 link 的信息。在我将六边形设置为“crispEdges”或“optimizeSpeed”后，白色间隙消失了。

标签： svg

【解决方案1】：

将所有六边形（或一组六边形）的形状渲染属性设置为“crispEdges”可解决此问题。例如

<polygon
  points="0,90 45,12 135,12 180,90 135,168 45,168"
  fill="green" stroke="none" stroke-width="0"
  shape-rendering="crispEdges" />

【讨论】：

设置crispEdges 将使外边缘看起来呈锯齿状，为了获得更好的效果，请设置一个覆盖间隙的描边，例如stroke="green" stroke-width="1.5"
我将使用相当复杂的填充（图案），所以我不能使用这个技巧。我必须填补空白，即使我会失去边缘的平滑度。
这对我有用，但我最终想将我的 svg 转换为 pdf ，其中差距再次出现。 PDF有类似的解决方案吗？