2013-07-13 62 views
1

我有一個正在剪裁的陰影的SVG刻度圖標。我在SO上看到的通常的過濾器偏移方法沒有幫助。有什麼建議麼?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生成了這個,然後通過代碼添加了陰影。

謝謝!

回答

3

展開過濾區域不會幫助在SVG視圖框外繪畫。現在,您的複選標記正好繪製在視圖框的邊緣,因此投影盒會切斷投影,而不是過濾器區域。增加你的viewbox的大小,這個世界會很好。

2

將SVG的CSS設置爲overflow:visible爲我工作。