Question

我正在尝试使用SVG制作类似网格的模式。我在<router-outlet>看到了非常奇怪的行为，当我通过路径使用这个代码（比如localhost / test）然后它无法在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中不起作用。为什么会出现这种问题的任何建议？

Answer 1

与chrome不同，Safari需要完整的路径。它不能采用相对路径，因此"url("+ window.location.href + "#pattern)"既适用于野生动物园，也适用于chrome

Answer 2

Tero Parviainen 制作了一篇关于与Angular进行图形交互的精彩指南，您可以 find here 。

总结一下，你应该在你的svg标签之前添加svg属性，这样Angular就不会将它们误认为是自定义组件。

<svg:rect id="test" x="10" y="10" width="250" height="250" style="fill: url('#pattern');"/>

SVG模式无法在Safari

2 个答案: