CODEWITHSUNDEEP
csssvgmaskdropshadow
VeryColdAir
VeryColdAir

Reputation: 107

How do I apply a drop-shadow to an SVG that is displayed via a mask?

I have two svgs that I'm switching between (via switch classes) to represent if a filter if applied to a table column. Based on new requirements, the svgs needed to change color to match the text, and the text isn't a static color. I achieved this by using a mask. Before this I was using background-image: url("../../img/Filter Icon Empty.svg"); and the filter for a drop-shadow worked perfectly (though I couldn't change the color of the svg).

Using the masks now, the drop-shadows no longer work. How can I get the drop-shadow to work with the masks?

HTML

<th>Column 1 <span class="icon-filter icon" onclick="filter(this)"></span></th>
<th>Column 2 <span class="icon-filter icon" onclick="filter(this)"></span></th>

CSS

/* Icon class is used for other icons besides just the filters */
.icon{
    display: inline-block;
    background-size: 1em;
    height: 1em;
    width: 1em;
    vertical-align: middle;
    position: relative;
    top: -.1em;
    margin-right: .1em;
}

.icon-filter{
    background-color: var(--mainText);
    mask-image: url("../../img/Filter Icon Empty.svg");
    mask-size: cover;
}

.icon-filter-active{
    background-color: var(--mainText);
    mask-image: url("../../img/Filter Icon Full.svg");
    mask-size: cover;
}

/* This bit isn't working. */
.icon-filter:hover,
.icon-filter-active:hover{
    filter: drop-shadow(0 0 3px black);
}

Upvotes: 1

Views: 365

Answers (0)

Related Questions