Question

我正在尝试使用复杂的SVG过滤器在Webkit中生成结果。过滤器非常拥挤，你将在下面看到，但是它渲染了一个很好的分形生成的地图，并且在Mozilla中做得很好。我想让Webkit也这样做。

Wikipedia page on browser support for SVG表示Webkit支持夜间构建的SVG过滤器，但没有说明它在发布版本上支持多少。我知道过滤器在每次实现时都会有不同的表现。

我想知道的是;

为了让Webkit正确呈现，我在这里找不到什么东西吗？
如果＃1不是，那么是否有像JavaScript库或类似的东西可以使Webkit正确渲染过滤器？

更新

我发现了Webkit needs a flag to enable SVG filters。有没有办法在Safari和Chrome中启用此功能？可以通过一些meta标记或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>

Answer 1

关于SVG支持，此页面概述了浏览器的功能和不执行功能：

http://www.codedread.com/svg-support.php（点击图片获取详细结果）

它基本上触发了每个浏览器中的所有W3C SVG测试。您可以使用这些测试来查看浏览器支持哪些过滤器，并查看SVG代码。

在我们的产品中，我们有一个GaussianBlur多年来现在在Firefox中运行良好，但从未在Safari中运行。谷歌Chrome从版本6开始可能会更好。

Answer 2

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

Webkit和SVG过滤器支持

更新

过滤器

2 个答案: