SVG模式在Safari中不起作用

我正在尝试使用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中模式不起作用。有没有关于为什么会发生这样的问题的建议?