Question

我想要一个SVG图像（预渲染，但在svg标签中插入js，允许进行一些进一步的操作），以便能够使用“pattern”标签使用预定义的模式。听起来很简单，不是吗？好吧，事实证明Chrome（Webkit？）的行为与其他任何浏览器都有所不同，现在我不确定实现这一目标的最佳方法是什么。

我的svg看起来像这样：

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

我希望类special的路径具有“模式”作为填充。

尝试一个：适用于Chrome，不适用于FF或Opera

我的第一次尝试就是把它放在我的CSS中：

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

这实际上适用于Chrome，但是当你想到它时，它可能不应该。我试过的其他浏览器将此url解释为相对于它所在的文件（css文件）which makes more sense。

尝试二：在FF和Opera中运行，而不是在Chrome中运行

下一次尝试：为模式提供绝对URL。

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

虽然这在FF和Opera中按预期工作，但Chrome现在重置了填充（我不知道它实际上在哪里寻找那种风格）

尝试三：工作，种类

SVG中的样式内容在任何地方都可以使用：style="fill:url('#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＆lt; = 9有'fill：url（#specialPattern）'

Answer 1

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

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

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

<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中，它们并不总是显示。

css-tricks提供的更多信息：http://css-tricks.com/using-svg/

如何以交叉浏览器一致的方式使用svg模式？

尝试一个：适用于Chrome，不适用于FF或Opera

尝试二：在FF和Opera中运行，而不是在Chrome中运行

尝试三：工作，种类

尝试四：工作（？）但很脏

1 个答案: