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>

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

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>