SVG 模式在 Safari 中不起作用 [英] SVG pattern not working in Safari

问题描述

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

I am trying to make a grid-like pattern using SVG. I am seeing really weird behavior with <router-outlet>, when I use this code via route (say localhost/test) then it fails to load pattern in Safari but using the selector of the component it works perfectly.

<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 中不起作用.关于为什么会发生此类问题的任何建议?

This works great in Chrome but it is showing black rect in safari. Also if I fill it with color then also it works in both browsers, but pattern is not working in Safari. Any suggestion on why such problem is occurring?

推荐答案

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

Safari needs complete path, unlike chrome. It cannot take relative path hence 'url(' + location.protocol + '//' + location.host + location.pathname + '#pattern)' will work both on safari and chrome

这篇关于SVG 模式在 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！