内联 svg 在 safari 中显示黑色，但在 chrome 上完美运行

Question

我正在尝试使用画布元素上方的内联 svg 作为网格。问题是 svg 网格在 safari 中显示黑色，而在 chrome 上工作正常。我已经尝试了实际的 url 进行填充，尝试了视图框，但没有任何效果。我已经使用对象标签进行了测试，但问题是我没有捕获我在 svg 网格上方需要的右键单击事件。这是我的代码

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid10" width="10" height="10" patternUnits="userSpaceOnUse">
<path
d="M 10 0 L 0 0 0 10"
fill="none"
stroke="gray"
stroke-width="0.5"
/>
</pattern>
<pattern
id="grid100"
width="100"
height="100"
patternUnits="userSpaceOnUse"
>
<rect width="100" height="100" fill="url(#grid10)" />
<path
d="M 100 0 L 0 0 0 100"
fill="none"
stroke="gray"
stroke-width="1"
/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid100)" />
</svg>

Answer 1

我的项目也有同样的问题。通常，这是网址引用的问题。在 Angular 8 中，它是由<base href="/">引起的。最简单的解决方案是使用<img src="image-path/your-image.svg">而不是内联 svg。另一种可能的解决方案是使用窗口 href 读取当前 url 或绝对定义它。