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?
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