css - 如何在 SVG 中制作插入阴影

Question

我需要制作一个带有嵌入投影的框，就像 CSS3 具有嵌入框阴影一样。到目前为止我发现的是一个带有 feGaussianBlur 的过滤器，但问题是它还在框外添加了一个投影，这是我不想要的。这是我到目前为止的代码:

<svg>
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="5" />
            <feGaussianBlur in="SourceAlpha" result="blur2" stdDeviation="10" />
            <feGaussianBlur in="SourceAlpha" result="blur3" stdDeviation="15" />
            <feMerge>
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
                <feMergeNode in="SourceGraphic" mode="normal"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="10" y="10" width="100" height="100"
    stroke="black" stroke-width="4" fill="transparent" filter="url(#drop-shadow)"/>
</svg>

我做了一个 demo它还将此代码与所需的 CSS 生成结果进行比较。过滤器不仅适用于矩形，还适用于梯形和更复杂的多边形。

我已经尝试过使用 radialGradient，但由于这会使渐变呈圆形，所以这也不好。

Answer 1

如果你有实心填充，你可以添加

<feComposite operator="in" in2="SourceGraphic"/> 

到过滤器的末尾，它会将模糊剪裁成 SourceGraphic 的形状。由于您的形状是透明的，因此您需要做更多的工作。我的建议是在原始图形上使用半透明填充以获得正确的合成选择，并使用 feFuncA 将填充归零以进行最终操作。事实证明这非常复杂。但这里有一个适用于任何实心笔画形状的解决方案

<filter id="inset-shadow" >
            <!-- dial up the opacity on the shape fill to "1" to select the full shape-->
            <feComponentTransfer in="SourceAlpha" result="inset-selection">
                <feFuncA type="discrete" tableValues="0 1 1 1 1 1"/>
            </feComponentTransfer>

            <!-- dial down the opacity on the shape fill to "0" to get rid of it -->
            <feComponentTransfer in="SourceGraphic" result="original-no-fill">
                <feFuncA type="discrete" tableValues="0 0 1"/>
            </feComponentTransfer>

            <!-- since you can't use the built in SourceAlpha generate your own -->
            <feColorMatrix type="matrix" in="original-no-fill" result="new-source-alpha" values="0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 1 0"
/>            

            <feGaussianBlur in="new-source-alpha" result="blur" stdDeviation="5" />
            <feGaussianBlur in="new-source-alpha" result="blur2" stdDeviation="10" />
            <feGaussianBlur in="new-source-alpha" result="blur3" stdDeviation="15" />
            <feMerge result="blur">
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
            </feMerge>
            <!-- select the portion of the blur that overlaps with your shape -->
            <feComposite operator="in" in="inset-selection" in2="blur" result="inset-blur"/>
             <!-- composite the blur on top of the original with the fill removed -->
            <feComposite operator="over" in="original-no-fill" in2="inset-blur"/>            
        </filter>

这是我对你的 fiddle 的 fork :http://jsfiddle.net/kkPM4/