如何修复svg元素之间的差距

Question

问题

我注意到矩形和路径之间存在一个奇怪的间隙，根据坐标，它应该是这样的：

但是看起来像这样：

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

我试图：

• 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

rect的轮廓似乎呈现与黑色不同的颜色。

无法在没有样式元素的情况下重现Chrome 63（63.0.3239.132）上的行为，甚至无法通过缩放级别进行扫描。

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

<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>