Chrome SVG 渲染工件答案

【问题标题】：Chrome SVG rendering artifactsChrome SVG 渲染工件
【发布时间】：2019-08-18 00:12:49
【问题描述】：

我有一个 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>

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

【问题讨论】：

这确实很奇怪。
您的代码唯一的问题是rgba() 颜色需要明确的第四个 alpha 值，即使它是 1，并且 <path/> 元素应该是自动关闭的。但是修复这些东西并没有什么不同。绝对是一个错误。
这可能是一个错误。你应该把它报告给 chrome
如果您已将其报告给 Chrome，请在此处发布错误报告的链接（以方便未来的读者）。
非虚拟机。我已经亲自向 Skia 报告了。这似乎是 GPU 渲染器的错误。 bugs.chromium.org/p/skia/issues/detail?id=8930

标签： google-chrome svg path

【解决方案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>

【讨论】：