Safari中SVG图案无法正常工作

Question

Safari中SVG图案无法正常工作

4

我正在尝试使用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中图案不能正常工作。对于为什么会出现这样的问题，有什么建议吗？

- Plochie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1797375 · Accepted Answer

Safari需要完整的路径，不像Chrome。因此它不能使用相对路径，因此'url（'+ location.protocol + '//' + location.host + location.pathname + '#pattern）'可以在Safari和Chrome上工作。