代码之家 › 专栏 › 技术社区 › edgerunner

WebKit和SVG过滤器支持

svg-filters webkit svg safari google-chrome

3

edgerunner · 技术社区 · 14 年前

我正在尝试用一个复杂的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>

2 回复 | 直到 12 年前

1

4

Volker 14 年前

关于SVG支持,本页对浏览器的作用和不作用有一个很好的概述:

http://www.codedread.com/svg-support.php (单击图像以获取详细结果)

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

在我们的产品中,Gaussianblur多年来一直在火狐中运行良好,但从未在Safari中运行过。谷歌Chrome从第6版开始可能会更好。

2

edgerunner 13 年前

看起来Chrome和Safari现在都在使用WebKit版本来呈现这个过滤器。