WebKit和SVG滤镜支持

Question

我正在尝试让一个复杂的SVG过滤器在Webkit中产生结果。正如您下面所看到的，该过滤器非常拥挤，但它在Mozilla中呈现出了一个不错的分形生成地图，并且做得很好。我希望Webkit也能做到同样的效果。

维基百科关于浏览器对SVG支持的页面说Webkit在夜间版本中支持SVG过滤器，但没有说明发布版本支持多少。我知道每个实现方式的过滤器行为都有所不同。

我想知道的是：

1. 我是否遗漏了一些东西，以便使Webkit正确呈现这个过滤器？
2. 如果第1点不是，则是否有类似JavaScript库或类似工具可以使Webkit正确呈现过滤器？

更新

我发现Webkit需要启用SVG过滤器标志。有没有办法在Safari和Chrome中开启它？可以通过某些标记或JavaScript来实现吗？

过滤器

  <filter id="elevation" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="black" result="bg"/>
    <feTurbulence type="turbulence" seed="68" stitchTiles="noStitch" numOctaves="8" baseFrequency="0.0025" result="turbulence"/>
    <feBlend in="bg" in2="turbulence" mode="screen"/>
    <feColorMatrix type="saturate" values="0"/>
    <feComponentTransfer>
        <feFuncR type="linear" slope="1.5" intercept=".3"/>
        <feFuncG type="linear" slope="1.5" intercept=".3"/>
        <feFuncB type="linear" slope="1.5" intercept=".3"/>
        <feFuncA type="identity" />
    </feComponentTransfer>
    <feColorMatrix type="matrix" 
      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0.2125 0.7154 0.0721 0 0"/>
    <feGaussianBlur stdDeviation="10" result="height"/>
    <feComponentTransfer result="contour">
        <feFuncR type="discrete" tableValues=" 0  0 .3 .4 .6 .8  1 1"/>
        <feFuncG type="discrete" tableValues=".1 .2 .2 .3 .5 .7 .9 1"/>
        <feFuncB type="discrete" tableValues=".3 .4 .1 .2 .4 .6 .8 1"/>
        <feFuncA type="discrete" tableValues=" 1  1  1  1  1  1  1 1"/>
    </feComponentTransfer>
    <feDiffuseLighting surfaceScale="100" diffuseConstant="1" in="height" result="sun" lighting-color="#FFC">
        <feDistantLight azimuth="-45" elevation="45"/>
    </feDiffuseLighting>
    <feDiffuseLighting surfaceScale="100" diffuseConstant="1" in="height" result="sky" lighting-color="#339">
        <feDistantLight azimuth="-135" elevation="70"/>
    </feDiffuseLighting>
    <feBlend in="sun" in2="sky" mode="screen" result="relief"/>
    <feBlend in="contour" in2="relief" mode="multiply"/>
  </filter>

- edgerunner

---

你的SVG代码在当前的WebKit夜间版本中运行得非常顺畅。 - Nicholas Shanks

Answer 1

关于SVG支持，这个页面提供了一个很好的概述，说明了浏览器所支持和不支持的内容：http://www.codedread.com/svg-support.php （点击图片可获取详细结果）。基本上，在每个浏览器中都会触发所有W3C SVG测试。您可以使用这些测试来查看您的浏览器支持哪些过滤器，并查看SVG代码。在我们的产品中，我们已经有了几年的GaussianBlur，在Firefox中表现良好，但在Safari中从未成功过。Google Chrome自6版本以来可能更好。

- Volker

---

没有帮助我解决实际问题，但让我了解了Batik和Squiggle。谢谢。 - edgerunner

Answer 2

看起来Chrome和Safari都正在使用一个可以渲染此过滤器的Webkit版本。

- edgerunner

---

@Pacerier，没有任何实际回答这个问题的东西。至少在几个月后，这个问题被关闭了。 - edgerunner