svg 클립 경로에 필터 적용

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

난 당신이 클립 경로에 직접 필터를 적용 할 수 있다고 생각하지 않지만,이 같은 래퍼 g 요소에 흐림 효과를 적용 할 수 있습니다 : 내가 뭘하려

<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>