Question

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

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

我读过有关CSS过滤器的内容，但它们都不适合在顶部添加颜色，只有像模糊或去饱和的东西。

Answer 1

请检查此代码段。我希望它会对你有所帮助。

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

使用CSS的SVG颜色叠加？

1 个答案: