So erstellen Sie einen eingefügten Schatten in SVG

Question

Ich muss eine Box mit einem Inline-Schatten erstellen, genau wie CSS3 einen Inline-Box-Schatten hat. Was ich bisher gefunden habe, ist ein Filter mit feGaussianBlur, aber das Problem ist, dass er auch einen Schatten außerhalb des Rahmens hinzufügt, was ich nicht möchte. Dies ist der Code, den ich bisher habe:

<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>

Ich habe eine Demo erstellt und diesen Code mit dem gewünschten CSS-Produktionsergebnis verglichen. Dieser Filter funktioniert nicht nur bei Rechtecken, sondern auch bei Trapezen und komplexeren Polygonen.

Ich habe es mit RadialGradient versucht, aber das ist auch nicht gut, da es den Farbverlauf kreisförmig macht.

Answer 1

主要基于我发现的实验，这就是我的想法：

<defs><filter id="inset-shadow">
    <feOffset dx="10" dy="10"/>                                                         <!-- Shadow Offset -->
    <feGaussianBlur stdDeviation="10"  result="offset-blur"/>                           <!-- Shadow Blur -->
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/> <!-- Invert the drop shadow to create an inner shadow -->
    <feFlood flood-color="black" flood-opacity="1" result="color"/>                     <!-- Color & Opacity -->
    <feComposite operator="in" in="color" in2="inverse" result="shadow"/>               <!-- Clip color inside shadow -->
    <feComponentTransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
        <feFuncA type="linear" slope=".75"/>
    </feComponentTransfer>
    <!--<feComposite operator="over" in="shadow" in2="SourceGraphic"/>-->                       <!-- Put shadow over original object -->
</filter></defs>

<rect width="100" height="100" fill="yellow" filter="url(#inset-shadow)"/>

如果您希望看到填充，请取消注释最后一个 。不幸的是，fill="transparent" 不会为滤镜提供可使用的 Alpha，也不会产生阴影。

Answer 2

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

<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>

这是我的小提琴分支：http://jsfiddle.net/kkPM4/