SVG 滤镜：缩放

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）将模糊阴影边缘内的值调整为 .12 - 泛洪值不透明度。像这样：

<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" />
  <feGaussianBlur stdDeviation="5"/>
  <feComponentTransfer result="opacityBlurOffset">
   <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"/>
  </feComponentTransfer>
  
  
  <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>

我应该注意到您的原始代码有一个挂起的引用 - 用作您的 feMergeNode "in" 的 opacityBlurOffset 没有引用以前的结果。

Answer 2

对于那些正在寻找的人。像上面的解决方案但没有嘈杂的边缘：

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="41.66666666666667" vector-effect="non-scaling-stroke" style="overflow: visible; width: 100%; height: 100%; pointer-events: none;">
    <defs>
        <linearGradient id="gradient-647049" gradientTransform="rotate(0)">
            <stop offset="0%" stop-color="#320606" stop-opacity="100"></stop>
            <stop offset="100%" stop-color="#FF0000" stop-opacity="100"></stop>
        </linearGradient>
        <filter id="shadow" color-interpolation-filters="sRGB" x="-100%" y="-100%" width="300%" height="300%">
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" in="SourceGraphic" result="shadow_color"></feColorMatrix>
            <feGaussianBlur in="shadow_color" stdDeviation="5" result="a-shadow_blur"></feGaussianBlur>
        </filter>
    </defs>
    <use xlink:href="#shape"
        x="50" y="50" transform="scale(1.212)" filter="url(#shadow)"
        style="transform-origin: 50% 50% 0px;"></use>
    <ellipse id="shape" cx="125" cy="20.833333333333336" rx="120.5" ry="16.333333333333336" fill="url(#gradient-647049)"
        stroke="rgba(27,117,221,1)" stroke-width="9" stroke-linejoin="round"></ellipse>
</svg>

SVG 滤镜：缩放

SVG Filter: Scale

scale

svg-filters