有没有办法使 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));

更新的 JSFiddle

Answer 2

您可以

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

.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>

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

<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 实现了解不多，所以也许有一种更简单的方法可以做到这一点。