有没有办法让 svg 多边形投影具有不透明度？

Question

有没有办法将不透明度编码到这个多边形中？我正在尝试，但 filter: drop-shadow( 6px 0 2px rgba(xxx,xxx,xxx,x.x)) 似乎不起作用。

这是一个 jsfiddle：http://jsfiddle.net/buhL2wjb/

html:

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-right-arrow" viewBox="0 0 20 152" preserveAspectRatio="xMinYMid meet">
        <polygon points="0,0 0,152 20,76"></polygon>
    </svg>
</div>

css:

.container{
    width:500px;
    height:300px;
    border:1px solid lightgrey;
}
.svg-right-arrow{
    height:100%;
    -webkit-filter: drop-shadow( 6px 0 2px #000000 );
        filter: drop-shadow( 6px 0 2px #000000 );
    }
.svg-right-arrow polygon{
    fill:lightblue;
}

Answer 1

使用hsla

filter: drop-shadow( 6px 0 2px hsla(0, 0%, 0%, 0.2));

Updated JSFiddle

Answer 2

您可以尝试在您的 svg 中使用过滤器 <feDropShadow>，但我不知道浏览器接受了多少（找不到很多关于它的信息……）

.container {
    width:500px;
    height:300px;
    border:1px solid lightgrey;
}
.svg-right-arrow {
    height:100%;
}
.svg-right-arrow polygon {
    fill:lightblue;
}

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-right-arrow" viewBox="0 0 20 152" preserveAspectRatio="xMinYMid meet">
        <defs>
            <filter id="feDropShadow2">
                <feDropShadow stdDeviation="0.00, 10.00" dx="6.00" dy="2.00" flood-color="#008000" flood-opacity="0.50">
            </filter>
        </defs>
        <polygon filter="url(#feDropShadow2)" points="0,0 0,152 20,76"></polygon>
    </svg>
</div>

或者您可以使用具有flood-opacity 属性的feFlood 找到一些等效的here。

<filter id="feDropShadowEquiv2">
<feGaussianBlur stdDeviation="2">
<feOffset dx="6" dy="2" result="offsetblur">
<feFlood flood-opacity="0.5" flood-color="#000000">>
<feComposite in2="offsetblur" operator="in">
<feMerge>

请注意，我对 svg 过滤器的 CSS 实现了解不多，所以也许有更简单的方法。