3
我需要一種基於alpha蒙版將「筆觸」（輪廓）和陰影效果添加到透明PNG圖像的方法，唯一能找到的解決方案是使用自定義SVG濾鏡。 （注：Web應用程序的，我需要這些效果是我自己私人使用的，所以沒關係，這個解決方案不是對舊版瀏覽器兼容的移動上...。）參數化和重用HTML5中定義的自定義SVG過濾器？
我從來沒有使用過SVG之前，但是單獨創建筆劃和陰影過濾器非常簡單。不幸的是，我無法找到一個方法來創建一個沒有實際複製並粘貼過濾器進入一個新的一個結合效果，如下面的代碼：
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<!-- drop shadow -->
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" />
<feOffset result="m_offsetBlurred" dx="12" dy="12" />
<feFlood result="m_floodTrans50" flood-color="rgba(0,0,0,0.5)" />
<feComposite result="m_offsetBlurredTrans50" in="m_floodTrans50" in2="m_offsetBlurred" operator="in" />
<feMerge>
<feMergeNode in="m_offsetBlurredTrans50" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- outer stroke -->
<filter id="outer-stroke">
<!-- create rectangle of the desired color -->
<feFlood result="m_floodRect" flood-color="black" />
<!-- create copy of png's alpha mask and expand -->
<feMorphology result="m_expandedMask" in="SourceAlpha" operator="dilate" radius="1" />
<!-- "cut out" a section of the flood fill matching the expanded copy -->
<feComposite result="m_expandedColored" in="m_floodRect" in2="m_expandedMask" operator="in" />
<!-- blend it behind the original shape to create the outline effect -->
<feBlend in="SourceGraphic" in2="m_expandedColored" mode="normal" />
</filter>
<!-- drop shadow & outer stroke (must copy & paste the 2 filters above, which violates the DRY principle) -->
<filter id="outer-stroke-drop-shadow">
<!-- create rectangle of the desired color -->
<feFlood result="m_floodRect" flood-color="black" />
<!-- create copy of png's alpha mask and expand -->
<feMorphology result="m_expandedMask" in="SourceAlpha" operator="dilate" radius="1" />
<!-- "cut out" a section of the flood fill matching the expanded copy -->
<feComposite result="m_expandedColored" in="m_floodRect" in2="m_expandedMask" operator="in" />
<!-- blend it behind the original shape to create the outline effect -->
<feBlend result="m_stroked" in="SourceGraphic" in2="m_expandedColored" mode="normal" />
<!-- add drop shadow -->
<feGaussianBlur result="m_blurred" in="SourceAlpha" stdDeviation="4" />
<feOffset result="m_offsetBlurred" in="m_blurred" dx="12" dy="12" />
<feFlood result="m_floodTrans50" flood-color="rgba(0,0,0,0.5)" />
<feComposite result="m_offsetBlurredTrans50" in="m_floodTrans50" in2="m_offsetBlurred" operator="in" />
<feMerge>
<feMergeNode in="m_offsetBlurredTrans50" />
<feMergeNode in="m_stroked" />
</feMerge>
</filter>
</svg>
<style>
.fx_drop_shadow { filter: url('#drop-shadow'); }
.fx_outer_stroke { filter: url('#outer-stroke'); }
.fx_outer_stroke_drop_shadow { filter: url('#outer-stroke-drop-shadow'); }
</style>
<div>
<img src="gfx/odd_shape.png" />
<img src="gfx/odd_shape.png" class="fx_drop_shadow" />
<img src="gfx/odd_shape.png" class="fx_outer_stroke" />
<img src="gfx/odd_shape.png" class="fx_outer_stroke_drop_shadow" />
</div>
這裏是如何將上面的代碼渲染HTML5文檔中：
這裏是原來的PNG圖形（odd_shape.png）：
問題1：如何重新使用前2個過濾器（drop-shadow和outer-stroke），所以我可以簡單地將它們，而不必複製並粘貼它們組合過濾器（outer-stroke-drop-shadow）。
問題2：是否有可能參數自定義過濾器，這樣可以指定的東西，如筆觸顏色或陰影的透明度？這會使它們更加可重用。
感謝。
對於重複使用，您可以使用「XML包括」喜歡這裏引用的那些基礎的方法：http://stackoverflow.com/questions/5121052/can-we-import- xml-file-into-another-xml-file。 對於參數化來說，某種類型的預處理器（認爲LESS或Compass）可能會訣竅，儘管快速谷歌沒有顯示任何現有的svg預處理器。您的項目是否使用構建/任務運行器，如grunt？ – Egg
如果您使用JavaScript，您可以克隆您的基本過濾器，然後向克隆中添加/刪除各種需要的元素，給它一個新的ID並應用它。 –