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浏览器中效果很好，但在野生动物园中却显示黑色矩形.另外，如果我用颜色填充它，那么它也可以在两种浏览器中使用，但是pattern在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)'将同时适用于野生动物园和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屋！