在线svg在野生动物园中显示为黑色，但在chrome上效果很好

Question

我正在尝试使用画布元素上方的嵌入式svg作为网格。问题在于svg网格在野生动物园中显示黑色，而在chrome上运行良好。我已经尝试了实际的网址进行填充，尝试了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>

Answer 1

我在我们的项目中有同样的问题。通常，这是URL引用的问题。在Angular 8中，它是由<base href="/">引起的。最简单的解决方案是使用<img src="image-path/your-image.svg">而不是嵌入式svg。另一个可能的解决方案是使用window href读取当前URL或对其进行绝对定义。