Поддержка Webkit и SVG-фильтров - PullRequest
Новая
       46

Поддержка Webkit и SVG-фильтров

3 голосов
/ 21 сентября 2010

Я пытаюсь получить сложный SVG-фильтр для получения результатов в Webkit.Фильтр довольно многолюдный, как вы увидите ниже, но он создает хорошую фрактальную карту и хорошо справляется с ней в Mozilla.Я бы хотел, чтобы Webkit делал то же самое.

На странице Википедии о поддержке браузером SVG говорится, что Webkit поддерживает фильтры SVG для ночных сборок, но не говорит, сколько этоподдерживает версию доставки.Я знаю, что фильтры ведут себя по-разному в каждой реализации.

Что я хотел бы знать, так это:

  1. Есть ли что-то, чего мне здесь не хватает, чтобы заставить Webkit отображать этоправильно?
  2. Если # 1 - нет, то есть ли что-нибудь похожее на библиотеку JavaScript или подобное, которая заставит Webkit правильно отображать фильтр?

Обновление

Iобнаружил, что Webkit нужен флаг для включения фильтров SVG .Есть ли способ включить это в 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 ]

4 голосов
/ 23 сентября 2010

Что касается поддержки SVG, эта страница имеет хороший обзор того, что браузер делает и не делает:

http://www.codedread.com/svg-support.php (нажмите на изображение, чтобы получить подробные результаты)

Он запускает все тесты W3C SVG в каждом браузере.Вы можете использовать эти тесты, чтобы увидеть, какие фильтры поддерживаются в вашем браузере, и взглянуть на код SVG.

В нашем продукте у нас есть GaussianBlur, который уже несколько лет хорошо работает в Firefox, но никогда в Safari.Google Chrome начиная с версии 6 может быть лучше.

2 голосов
/ 27 июля 2011

Похоже, что и Chrome, и Safari теперь используют версию Webkit, которая может отображать этот фильтр.

...