Colour overlay for SVG using CSS?

Question

Is there a way to apply a colour overlay to an SVG using CSS?

I have some SVGs (icons, shapes etc) that I need to be able to "tint" - adding a solid colour overlay but keep the transparency.

I read about the CSS filters, but none of them cater for adding a colour over the top, only stuff like blur or desaturate.

possible duplicate of [How to change color of SVG image using CSS (jQuery SVG image replacement)](http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement) — APAD1, May 29 '15 at 15:30

score -1 · Answer 1 · answered May 29 '15 at 15:41

Please check this code snippet. I hope it will be help you.

    <svg width="0" height="0" class="svg-visiblity">
        <defs>
            <path id="hex" d="M11.5,20.9L44.3,2c3.7-2.2,8.3-2.2,12.1,0l32.8,18.9c3.7,2.2,6,6.1,6,10.4v37.8c0,4.3-2.3,8.3-6,10.4 L56.3,98.4c-3.7,2.2-8.3,2.2-12.1,0L11.5,79.5c-3.7-2.2-6-6.1-6-10.4V31.3C5.4,27,7.7,23,11.5,20.9z"/>
            <clipPath id="hex-clip-200">
                <use xlink:href="#hex" transform="scale(2 2)" />
            </clipPath>
        </defs>
    </svg>
                <svg class="image-200-2">
                    <rect class="border" width="100%" height="100%" transform="scale(1.02)" style="clip-path: url(#hex-clip-200);" /></rect>
                    <image xlink:href="http://placehold.it/200x200" width="200" height="200" transform="translate(2 2)" style="clip-path: url(#hex-clip-200);"></image>
                </svg>

CSS

.image-200-2 {
  display: inline-block;
  height: 205px;
  width: 205px;
}
.image-200-2 .border {
  fill: rgba(0, 0, 0, 0.5);
}
.svg-visiblity {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

See here: https://jsfiddle.net/zyr8wovg/4/

Colour overlay for SVG using CSS?

1 Answers1