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>，但我不知道浏览器接受了多少（无法找到很多相关信息......）

＆＃13;

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

＆＃13;

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

＆＃13;

或者您可以使用here使用具有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实现了解不多，所以可能有更简单的方法。

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

2 个答案:

Updated JSFiddle