Is there a way to make svg polygon drop-shadow to have an opacity?

Question

Is there a way to have an opacity coded into this polygon? I am trying but filter: drop-shadow( 6px 0 2px rgba(xxx,xxx,xxx,x.x)) doesnt seem to work.

Here is a 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

Use hsla

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

Updated JSFiddle

Answer 2

You could try using the filter <feDropShadow> into your svg but I don't know how much it is accepted by browsers (can't find a lot about it…)

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

or you could use some equivalent found here using feFlood which has a flood-opacity attribute.

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

Note that I don't know so much about CSS implementation of svg filters so maybe there is an easier way to do so.