SVG 模式在 Safari 中不起作用

Question

我正在尝试使用 SVG 制作类似网格的图案。当我通过路由（比如 localhost/test）使用此代码时，我看到 <router-outlet> 的行为非常奇怪，然后它无法在 Safari 中加载模式，但使用组件的选择器它工作得很好。

<defs>
     <pattern id="pattern" width="10" height="10">
         <path d="M10,0 L10,10 L0,10" fill="none" stroke="#E9E9E9" stroke-width="1"/>
     </pattern>
</defs>

<rect id="test" x="10" y="10" width="250" height="250" style="fill: url('#pattern');"/>

这在 Chrome 中效果很好，但在 safari 中显示为黑色矩形。此外，如果我用颜色填充它，那么它也适用于两种浏览器，但模式在 Safari 中不起作用。关于为什么会出现此类问题的任何建议？

Answer 1

Safari 需要完整路径，这与 chrome 不同。它不能采用相对路径，因此 'url(' + location.protocol + '//' + location.host + location.pathname + '#pattern)' 将在 safari 和 chrome

上工作

SVG 模式在 Safari 中不起作用

SVG pattern not working in Safari

svg

angular-routing

angular