为什么 SVG 阴影是在底部剪切的

Question

我做了一个小的SVG图标，需要在底部有一个阴影。我无法理解的是为什么它的影子被剪掉了？

提前感谢！

<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 barMiddleSVG___3x9T-" filter="" fill="url('#star_container_gradient_one')" stroke="transparent" stroke-width="0" width="43" height="36" viewBox="0 -1 43 38"><linearGradient id="star_container_gradient_one" gradientTransform="rotate(90)">
<stop offset="0" stop-color="#c2c2b3"></stop>
<stop offset="1" stop-color="#dedece"></stop>
</linearGradient>
<defs>
<style>.romb_top_border, .romb_bottom_border { fill: transparent; stroke: #e9ebd8; stroke-width: 1.5px; }</style>
<filter id="romb_container_shadow_bottom">
<feDropShadow dx="0" dy="2" stdDeviation=".5" flood-color="#4a444494"></feDropShadow>
</filter>
</defs>
<path filter="none" d="
            M 1 11
            L 21.4 1
            L 42.8 11
            L 42.8 26
            L 21.4 36
            L 1 26
            L 1 11
            Z
          "></path><path class="romb_top_border" filter="none" d="
            M 1 11
            L 21.4 1
            L 42.8 11
          "></path><path class="romb_bottom_border" filter="url(#romb_container_shadow_bottom)" d="
            M 42.8 26
            L 21.4 36
            L 1 26
"></path></svg>

Answer 1

几件事。调整 svg 的大小以适应 svg 元素及其viewbox上的筛选器结果所需的大小，并增加筛选器的高度以适应 svg 的边界。下面的例子，希望有帮助，干杯。

哦，还有PS，我假设Longson先生指出的8位十六进制颜色是XAML路径习惯的残余习惯，其中您可以通过将值附加到第一个八位字节来指定alpha通道。又名<alpha opacity>RGB？

svg { border: rgba(255,0,0,.2) 3px solid}

<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 barMiddleSVG___3x9T-" filter="" fill="url('#star_container_gradient_one')" stroke="transparent" stroke-width="0" width="43" height="40" viewBox="0 0 43 38"><linearGradient id="star_container_gradient_one" gradientTransform="rotate(90)">
<stop offset="0" stop-color="#c2c2b3"></stop>
<stop offset="1" stop-color="#dedece"></stop>
</linearGradient>
<defs>
<style>.romb_top_border, .romb_bottom_border { fill: transparent; stroke: #e9ebd8; stroke-width: 1.5px; color }</style>
<filter id="romb_container_shadow_bottom" height="150%">
<feDropShadow dx="0" dy="2" stdDeviation=".5" flood-color="#4a444494"></feDropShadow>
</filter>
</defs>
<path filter="none" d="
            M 1 11
            L 21.4 1
            L 42.8 11
            L 42.8 26
            L 21.4 36
            L 1 26
            L 1 11
            Z
          "></path><path class="romb_top_border" filter="none" d="
            M 1 11
            L 21.4 1
            L 42.8 11
          "></path><path class="romb_bottom_border" filter="url(#romb_container_shadow_bottom)" d="
            M 42.8 26
            L 21.4 36
            L 1 26
"></path></svg>