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

This is a little tool I wrote to duplicate photoshop drop shadows in SVG filters: http://codepen.io/mullany/pen/sJopz — Michael Mullany, Jan 11 '15 at 17:35

score 7 · Accepted Answer · answered Jan 11 '15 at 01:09

7

Use hsla

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

Updated JSFiddle

answered Jan 11 '15 at 01:09

scniro

16,844
8
62
106

Wow awesome! Never heard of hsla. What is browser compatibility for it? – Chipe Jan 11 '15 at 01:13
rgba(0, 0, 0, 0.2) is another alternative that should work. Both work on Firefox 35. – Robert Longson Jan 11 '15 at 07:09

score 2 · Answer 2 · answered Jan 11 '15 at 01:17

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.

Thanks! That's the first mention I could find of usage of "flood-opacity" with feDropShadow. I've been looking for something like it and unfortunately it is not mentioned in the official references I found. — Naor Biton, Jun 12 '19 at 09:58

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

2 Answers2

Updated JSFiddle