Chrome SVG渲染工件

Question

我有一个简单的Chrome SVG渲染问题示例。有两个重叠的三角形-但不是在单色中填充渐变，而是在Chrome中添加了渐变：

https://jsfiddle.net/prozoroff/f97tjwcb/

<svg width="1000px" height="1000px">
  <path id='path' d="M100 100 L100 200 L200 100 M150 150 L200 200 L180 200"
   stroke="none" fill="rgba(50,50,50)"></path>
</svg>

还有其他人遇到这个问题吗？看起来像个错误，但是也许有一些方法可以用代码修复它？

Answer 1

解决此问题的一种方法是将第二步（M）稍微偏离对角线。

 M150.2 150.2

<svg width="1000px" height="1000px">
  <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
   stroke="none" fill="rgb(50,50,50)"></path>
</svg>