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

【问题标题】：Inline svg showing black in safari but works perfectly on chrome内联 svg 在 safari 中显示黑色，但在 chrome 上完美运行
【发布时间】：2023-03-17 11:24:01
【问题描述】：

我正在尝试使用画布元素上方的内联 svg 作为网格。问题是 svg 网格在 safari 中显示为黑色，而在 chrome 上运行良好。我已经尝试过填充的实际 url，尝试过 viewbox，但没有任何效果。我已经使用对象标签进行了测试，但问题是我没有捕捉到我在 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>

【问题讨论】：

页面是否包含标签？
是的，它在 Angular 8 上，它有基本标签，我试图删除它但没有运气。
Safari 真的不喜欢标签。它们会干扰其 SVG URL 解析。
我也尝试添加完整的 url 路径，但也没有运气。相同的 svg 正在使用 Angular JS，但不适用于 Angular 8。

标签： javascript svg safari

【解决方案1】：

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

【讨论】：