SVG Filter：Scale

Question

我使用svg過濾器將svg圖形附加到它上面。我需要縮放陰影，但找不到可以做到這一點的過濾器。有誰知道這是可能的嗎？

<svg class="svg" width="155" height="460" viewbox="0 0 100 100" preserveAspectRatio ="xMidYMin meet"> 
    <filter id="shadow" class="shadow" width="200%" height="200%"> 
     <feOffset   dx="0" dy="30"    in="SourceAlpha" result="offset" /> 
     <feFlood   flood-opacity="0.12"       result="opacity" /> 
     <feComposite         operator="in"  in="opacity"  in2="offset" result="opacityOffset" /> 
     <feMerge class="everything"> 
      <feMergeNode in="opacityBlurOffset" /> 
      <feMergeNode in="SourceGraphic" /> 
     </feMerge> 
    </filter> 
    <circle class="circle" 
      cx="50" 
      cy="50" 
      r="40" 
      fill="tomato" 
      filter="url(#shadow)"/> 
</svg> 

http://codepen.io/bradjohnwoods/pen/XXMPGY

Answer 1

可以通過使用模糊放大的陰影，然後使用不透明度的映射（使用feComponentTransfer/feFuncA）到撥號模糊陰影0.12的邊緣內的值 - 你的洪水不透明度的價值。事情是這樣的：

<svg class="svg" width="155" height="460" viewbox="0 0 100 100" preserveAspectRatio ="xMidYMin meet"> 
 
\t <filter id="shadow" class="shadow" width="200%" height="200%"> 
 
\t \t <feOffset \t \t \t dx="0" dy="30" \t \t \t \t in="SourceAlpha" \t result="offset" /> 
 
\t \t <feFlood \t \t \t flood-opacity="0.12" \t \t \t \t \t \t \t result="opacity" /> 
 
\t \t <feComposite \t \t \t \t \t \t \t \t \t operator="in"  in="opacity" \t \t in2="offset" \t result="opacityOffset" \t /> 
 
\t \t <feGaussianBlur stdDeviation="5"/> 
 
\t \t <feComponentTransfer result="opacityBlurOffset"> 
 
\t \t \t <feFuncA type="table" tableValues="0 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12"/> 
 
\t \t </feComponentTransfer> 
 
\t \t 
 
\t \t 
 
\t \t <feMerge class="everything"> 
 
\t \t \t <feMergeNode in="opacityBlurOffset" /> 
 
\t \t \t <feMergeNode in="SourceGraphic" /> 
 
\t \t </feMerge> 
 
\t </filter> 
 
\t <circle class="circle" 
 
\t \t \t cx="50" 
 
\t \t \t cy="50" 
 
\t \t \t r="40" 
 
\t \t \t fill="tomato" 
 
\t \t \t filter="url(#shadow)"/> 
 
</svg>

我要指出，你原來的代碼有一個掛參考 - opacityBlurOffset作爲你的「中」，沒有參考以前的結果feMergeNode。