如何在SVG中制作嵌入式投影

乔伊特·杰

我需要制作一个带有嵌入式投影的框,就像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>

我做了一个演示,还将这个代码与所需的CSS生成的结果进行了比较。过滤器不仅应在矩形上工作,而且还应在梯形和更复杂的多边形上工作。

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

迈克尔·穆兰尼(Michael Mullany)

如果您有一个坚实的填充,您可以添加

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章