SVG 드롭 섀도 클리핑

클리핑되고있는 드롭 섀도우가있는 SVG 눈금 아이콘이 있습니다. 여기에서 보았던 일반적인 필터 오프셋 방법은 도움이되지 않습니다. 어떤 제안?SVG 드롭 섀도 클리핑

<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" width="73.516px" height="55.507px" viewBox="0 0 73.516 55.507" xml:space="preserve"> 

    <filter id="dropShadow" x="-20%" y="-20%" width="200%" height="200%"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" /> 
    <feOffset dx="0" dy="0" /> 
    <feMerge> 
     <feMergeNode /> 
     <feMergeNode in="SourceGraphic" /> 
    </feMerge> 
    </filter> 

    <polygon fill="#F2F2F2" points="61.769,0 29.784,31.987 11.765,13.96 0,25.69 18.034,43.735 18.011,43.761 29.748,55.507 
    73.516,11.75 " filter="url(#dropShadow)"/> 

</svg>

Adobe Illustrator에서 이것을 생성 한 다음 코드를 통해 그림자를 추가했습니다.

감사합니다.

출처

2013-07-13 Drew Baker

필터 영역을 확장해도 SVG 뷰 박스 외부로 칠하는 데 도움이되지 않습니다. 지금 당장 당신의 체크 마크는 뷰 박스의 가장자리까지 페인트되므로 드롭 그림자는 필터 영역이 아닌 뷰 박스에 의해 잘려나 간다. 당신의 뷰 박스의 크기를 늘리면 세계는 좋을 것입니다.

출처

2013-07-14 00:18:16

SVG 용 CSS를 overflow:visible으로 설정하면 효과적입니다.

출처

2016-03-16 01:34:32

SVG 드롭 섀도 클리핑

답변

관련 문제