ポリゴンでSVGの背景がぼやけた

Question

ポリゴンの形をした背景をぼかそうとしています。以下はsvgです。そして、ここで私がぼやけた背景画像の一部を見て期待していBin

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;"> 
    <defs> 
    <filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse"> 
     <feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur> 
     <feComponentTransfer in="blurSquares" result="opaqueBlur"> 
     <feFuncA type="linear" intercept="1"></feFuncA> 
     </feComponentTransfer> 
     <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend> 
    </filter> 
    </defs> 
    <g filter="url(#blurry)"> 
    <polygon points="0,0 100,0 100,200 0,200 0,0"></polygon> 
    </g> 
</svg> 

です。しかし、期待どおりに動作していません。それを動作させるためにはどのような変更が必要ですか？

Answer 1

あなたのポリゴンタグにこのコードを配置：

<polygon points="200,0 0,160 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon> 

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 
body { 
 
    background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg'); 
 
}

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;"> 
 
    <defs> 
 
    <filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse"> 
 
     <feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur> 
 
     <feComponentTransfer in="blurSquares" result="opaqueBlur"> 
 
     <feFuncA type="linear" intercept="1"></feFuncA> 
 
     </feComponentTransfer> 
 
     <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend> 
 
    </filter> 
 
    </defs> 
 
    <g filter="url(#blurry)"> 
 
    <polygon points="200,0 0,160, 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon> 
 
    </g> 
 
</svg>

Answer 2

あなたfeComponentTransferとfeBlendタグを削除した場合にあなたのコードが動作します。

http://jsbin.com/tuyorotome/1/edit?html,css,output

Answer 3

自動的にページ上のSVGの後ろに何かをあいまいにするSVGでぼかしフィルターのための信頼できる方法はありません。

目的を達成するには、背景画像をSVGにコピーし、ぼかしフィルタをその画像に適用する必要があります。もちろん、HTMLのイメージとSVGのバージョンが正しく並んでいることを確認する必要があります。

たとえば、SVGの画像がぼやけているあなたの例のバージョンです。しかし、ポリゴンはまだありません。

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 
body { 
 
    background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg'); 
 
}

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;"> 
 
    <defs> 
 
     <filter id="blurry"> 
 
     <feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur> 
 
     </filter> 
 
    </defs> 
 

 
    <image x="0" y="0" 
 
      width="500" height="332" 
 
      xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" 
 
      filter="url(#blurry)" /> 
 
</svg>

我々はぼやけた画像は、ポリゴンの内側になりたい場合は今、私たちは、クリッピングパスでそれを行うことができます。

ポリゴンをクリッピングパスに変換し、それをぼかし画像に適用します。

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 
body { 
 
    background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg'); 
 
}

<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;"> 
 
    <defs> 
 
     <filter id="blurry"> 
 
     <feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur> 
 
     </filter> 
 

 
     <clipPath id="polyclip"> 
 
      <polygon points="50,200, 300,50, 400,300" /> 
 
     </clipPath> 
 
    </defs> 
 

 
    <image x="0" y="0" 
 
      width="500" height="332" 
 
      xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" 
 
      filter="url(#blurry)" 
 
      clip-path="url(#polyclip)" /> 
 
</svg>

私はここに少しより興味深いの三角形のポリゴンを使用しています注意してください。その効果はより明らかです。