Почему 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.Пример ниже, надеюсь, что это поможет, уразначение первого октета.АКА <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>