Применить фильтр на svg clip-path

Question

Я хочу применить фильтр по клику SVG.

Вот мой код,

<svg> 
    <filter id="filter"> 
     <feGaussianBlur stdDeviation="10"></feGaussianBlur> 
    </filter> 
    <clipPath id="clip-path"> 
     <rect width="200" height="100" x="0" y="0" filter="url(#filter)"/> 
    </clipPath> 
    <g clip-path="url(#clip-path)"> 
     <image xlink:href="image.png" width="100%" height="100%" /> 
    </g> 
</svg> 

Любая идея?

Answer 1

Я не верю, что вы можете применить фильтр непосредственно к клипу-пути, но вы можете применить размытие на обертку г элемента, как это:

<svg width="600px" height="300px"> 
    <filter id="filter"> 
     <feGaussianBlur stdDeviation="10"></feGaussianBlur> 
    </filter> 
    <clipPath id="clip-path"> 
     <rect width="200" height="100" x="0" y="0" /> 
    </clipPath> 
    <g filter="url(#filter)"> 
    <g clip-path="url(#clip-path)"> 
     <image xlink:href="http://image.png" width="100%" height="100%" /> 
    </g> 
    </g> 
</svg>