如何修复svg元素之间的间隙

Question

问题

我注意到一个矩形和一个路径之间有一个奇怪的间隙，根据坐标，它应该看起来像这样：

但看起来像这样：

它出现在 Firefox、Edge 和 IE 中，在 Chrome 中仅在某些缩放级别或添加 Stoke 时出现。

---

我尝试过：

• remove all white spaces (looks like the very same problem)
• add attribute shape-rendering="crispEdges"
• move the elements closer together so that they would overlap (jsfiddle)

  改善了问题，但没有解决它并引入了新问题（如笔划不匹配）。

Chrome 中的结果（v64.0.3282.140）：

Firefox(v58.0.1) 中的结果：

感谢您的考虑

---

示例

<svg>
  <g transform="matrix(1,0,0,1,60,10)">
    <rect width="60" height="10" x="-30" y="0" rx="5" ry="5"></rect>
    <path d="M15,10 C0,10 15,25 0,25 C-15,25 0,10 -15,10" ></path>
  </g>
</svg>

<style>
  g{
    stroke: red;
    fill: black;
  }
</style>

Answer 1

rects 的轮廓似乎以不同于黑色的颜色呈现。

在没有 style 元素的情况下无法重现 Chrome 63 (63.0.3239.132) 上的行为，甚至无法扫描缩放级别。

但是，一种可能的解决方法是使用 closepath 说明符关闭路径（路径规范中的 Z 或 z；有关 svg 规范的相关部分，请参阅 here）：

<path d="M15,10 C0,10 15,25 0,25 C-15,25 0,10 -15,10"></path>

如果此修改不够，请补充路径以沿着路径定义的形状覆盖的 x 间隔在矩形的轮廓上绘制：

<path d="M15,10 C0,10 15,25 0,25 C-15,25 0,10 -15,10 l0,-1 L15,9 Z"></path>