代码之家 › 专栏 › 技术社区 › Plochie

SVG模式在Safari中不起作用

angular-routing svg angular

4

Plochie · 技术社区 · 8 年前

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

1 回复 | 直到 8 年前

1

13

Eduard Kolosovskyi 6 年前

Safari需要完整的路径,不像chrome。因此,它不能采用相对路径 'url(' + location.protocol + '//' + location.host + location.pathname + '#pattern)' 可用于safari和chrome