如何以跨浏览器一致的方式使用svg模式? [英] How do I use svg patterns in a cross browser consistent way?

问题描述

我希望SVG图像(已渲染，但在svg标签中与js一起插入，以便进行一些进一步的操作)能够使用模式"标签使用预定义的模式.听起来很简单，不是吗?好吧，事实证明Chrome(Webkit?)的行为与任何其他浏览器都有些不同，现在我不确定实现此目标的最佳方法是什么.

I want a SVG image (prerendered, but inserted with js in an svg tag, to allow for some further manipulation) to be able to use a predefined pattern, using the "pattern" tag. Sounds simple enough, doesn't it? Well, turns out Chrome (Webkit?) behaves a bit different from any other browsers, and now I'm not sure what the best way would actually be to achieve this.

我的svg看起来像这样:

My svg looks like this:

<svg>
 <defs>
  <pattern id="specialPattern">...</pattern>
 </defs>
 <path class="special"></path>
</svg>

并且我希望类special的路径具有模式"作为填充.

and I want paths with the class special to have "pattern" as fill.

我的第一个尝试是将其简单地放在CSS中:

My first attempt was to simply put this in my css:

 .special { fill:url("#specialPattern");}

这实际上在Chrome中有效，尽管当您考虑时可能不应该如此.我尝试使用的其他浏览器将此URL解释为与其所在文件(css文件)相对的

This actually works in Chrome, though when you think about it, it probably shouldn't. The other browsers I tried interpret this url as relative to the file it's in (the css file), which makes more sense.

下一次尝试:提供模式的绝对URL.

Next attempt: Provide an absolute url to the pattern.

 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

尽管这在FF和Opera中可以正常工作，但Chrome现在改为重置填充(我不知道它实际在哪里寻找该样式)

While this works as expected in FF and Opera, Chrome now resets the fill instead (I have no idea where it is actually looking for that style)

在SVG中内联样式似乎可以在任何地方使用:style="fill:url('#specialPattern')"

Inlining the style in the SVG works everywhere it seems: style="fill:url('#specialPattern')"

尽管我猜这是内容和表示之间的界限模糊的情况，但至少就我而言，将样式声明保留在其他位置会更好(尤其是因为这会使我的SVG变得更大) )

And though I guess this is a case where the lines between content and presentation is blurred, in my case at least it would be much better to keep style decclarations elsewhere (not least because this would make my SVG need to be much bigger)

我还没有测试很多浏览器，所以我不确定它的防水性如何，但是在我看来，喜欢使用CSS hack来检测Webkit浏览器是否有效:

I haven't tested a lot of browsers, so I'm not sure about how water proof it is, but it seems to me like using a css hack to detect webkit browsers would work:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .special {fill: url("#specialPattern");}
}
 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

现在，必须有一种更优雅的方式来解决此问题.应该怎么做?

Now, there MUST be a more elegant way to solve this. How should it be done?

原来IE在这里的行为类似于Chrome，因此您还需要确保IE< = 9带有'fill:url(#specialPattern)'

Turns out that IE behaves like Chrome here, so you would also need to make sure IE<=9 has 'fill: url(#specialPattern)'

推荐答案

这是我用来操纵图案和蒙版的小提琴.这是svg xml中的评分显示，我希望能够在评分栏中使用百分比.

Here's a Fiddle that I did for manipulating patterns and masks. It's a ratings display in svg xml, in which I wanted to be able to use a percentage for the rating bar.

小提琴: http://jsfiddle.net/cnLHE/296/

通过将最后一行更改为"width ="50"，然后按运行，您可以看到评级栏的大小调整.

By changing the last line to "width="50", and pressing Run, you can see the rating bar resizes.

<svg width="100%" height="100%" viewBox="0 0 100 20" version="1.1">
<defs>
  <pattern id="pattern1" x="0" y="0" width="20" height="20"
         patternUnits="userSpaceOnUse" >
      <circle cx="10" cy="10" r="5" style="fill:white" />
   </pattern>
  <pattern id="pattern2" x="0" y="0" width="20" height="20"
         patternUnits="userSpaceOnUse" >
      <circle cx="10" cy="10" r="9" style="fill:white" />
      <circle cx="10" cy="10" r="7" style="fill:black" />
    </pattern>
  <mask id="mask1" x="0" y="0" width="100" height="20" >
    <rect x="0" y="0"  width="100" height="20"
        style="stroke:none; fill: url(#pattern2)"/>
  </mask>
  <mask id="mask5" x="0" y="0" width="100" height="20" >
    <rect x="0" y="0"  width="100" height="20"
        style="stroke:none; fill: url(#pattern1)"/>
  </mask>
</defs>1<rect x="0" y="0" width="500" height="20" fill="url(#pattern2)" style="fill:#2498c7; mask: url(#mask1)"/>
<rect x="0" y="0" width="50" height="20" style="fill:#2498c7; mask: url(#mask5)"/>

</svg>

我没有任何跨浏览器问题，但是，确实存在SVG在网格布局中间歇性消失的问题.在页面中有多个实例的webkit中，它们并不总是显示.

I didn't have any cross browser issues, BUT, I did have issues with the SVG disappearing intermittently in grid layouts. In webkit with multiple instances in page, they weren't always showing.

有关css-tricks的更多信息: http://css-tricks.com/using-svg/

Further info available at css-tricks: http://css-tricks.com/using-svg/

这篇关于如何以跨浏览器一致的方式使用svg模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！