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 Path习惯中的一种剩余习惯，其中您可以通过将值附加到第一个八位位组来指定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>

为什么在底部切下SVG阴影

1 个答案: