0

これは、CSS ぼかしフィルターの作業コードです。

filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url('images/blur.svg#blur');

blur.sv の場所:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>

そして、これはグレースケールで機能しています：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

しかし、グレースケールとぼかしを同時に (特に URL を使用して) 作成するにはどうすればよいですか? 私は試した：

filter: blur(3px) grayscale(100%);
-webkit-filter: blur(3px) grayscale(100%);
-moz-filter: blur(3px) grayscale(100%);
-o-filter: blur(3px) grayscale(100%);
-ms-filter: blur(3px) grayscale(100%);
filter: url('images/blur.svg#blur'), url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

しかし、ぼかしのないグレースケールしか得られません。どんな助けでも大歓迎です。

編集: Rakesh Juyal が述べているように、Chrome では正常に動作しますが、Firefox では動作しません。

4

1 に答える 1

2

ここで実際の例を参照してください。

http://jsbin.com/okemik/6

ぼかし + グレースケール フィルターを使用して 1 つの SVG 要素を作成しました。

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>

  <filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter>

  <filter id='grayscaledBlur'>
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>

    <feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>

    </filter>


</svg>
于 2012-12-18T11:37:10.400 に答える