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>