javascript - 为什么 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 channel 。又名 <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>