SVG pattern not working in Safari

Question

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');"/>

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?

Answer 1

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