使用CSS的SVG颜色叠加？

Question

有没有办法使用 CSS 将颜色叠加应用到 SVG？

我有一些 SVG（图标、形状等）需要能够“着色” - 添加纯色叠加层但保持透明度。

我阅读了有关 CSS 过滤器的信息，但它们都不适合在顶部添加颜色，只有模糊或去饱和之类的东西。

Answer 1

请检查此代码 sn-p。希望对你有帮助。

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

请看这里：https://jsfiddle.net/zyr8wovg/4/