我想要一个SVG图像(预渲染,但在svg标签中插入js,以允许进一步操作)能够使用"pattern"标签使用预定义的模式.听起来很简单,不是吗?好吧,事实证明Chrome(Webkit?)的行为与其他任何浏览器都有所不同,现在我不确定实现这一目标的最佳方法是什么.
我的svg看起来像这样:
并且我希望类中的路径special
具有"模式"作为填充.
我的第一次尝试就是把它放在我的CSS中:
.special { fill:url("#specialPattern");}
这实际上适用于Chrome,但是当你想到它时,它可能不应该.我尝试的其他浏览器将此url解释为相对于它所在的文件(css文件),这更有意义.
下一次尝试:为模式提供绝对URL.
.special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}
虽然这在FF和Opera中可以正常工作,但Chrome现在重置了填充(我不知道它实际上在寻找那种风格)
内联SVG中的样式可以在任何地方使用: #specialPattern')"
虽然我猜这是内容和演示之间的界限模糊的情况,但在我的情况下,至少将样式decclarations保存在其他地方会更好(尤其是因为这会使我的SVG需要更大)
我没有测试过很多浏览器,所以我不确定它是如何防水的,但在我看来,使用css hack来检测webkit浏览器会起作用:
@media screen and (-webkit-min-device-pixel-ratio:0) { .special {fill: url("#specialPattern");} } .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}
现在,必须有一种更优雅的方式来解决这个问题.应该怎么做?
编辑:原来IE的行为与Chrome一样,所以你还需要确保IE <= 9有'fill:url(#specialPattern)'