Question

我将svg图标设置为较少的变量：

@logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 792"><path fill="@{t-body-color}" d="M281.4,463.6h-11.3c0,0,0.6-17.5-2-35.7c14.2-15.2,19.8-46.4,19.8-46.4s7,1.7,11.6-21.5c4.7-23.1-4.7-26.8-4.7-26.8s0.6-40,2-62.5c1.3-17.9-10.3-28.2-14.9-31.5c-1.3-1-2-2.3-2.3-3.9c-1.3-8.6-6.2-36.5-14-43.7c-16.9,20.8-102,36.7-102,36.7c-27.8,7-33.8,31.5-32.8,42.4c2,22.5,2,62.5,2,62.5s-9.5,3.7-4.7,26.8c4.7,23.1,11.6,21.5,11.6,21.5s6,31.1,19.8,46.4c-2.7,18.6-2,35.7-2,35.7h-11.3c-1,0-2,0.6-2,1.7c-1.3,6.2-0.6,24.5-9.5,30.5c-26.2,17.1-135.1,49.6-135.1,76V702h428.3V595.3c0-50.1-108.9-82.5-135.1-99.6c-9.3-6-8.3-24.5-9.5-30.5C283.1,464.2,282.4,463.6,281.4,463.6L281.4,463.6zM465.9,471.5v-22.2c0,0,48.7-4.3,63.3-41.4c-15.2-5-34.8-16.5-41.1-48.3c-3.9-20.2,5.6-60.6-3.3-77.1c-5.3-9.5-16.9-20.2-29.1-21.2c-7.3-16.3-31.5-20.8-44.4-20.8c-32.1,1-59,17.5-71.8,42.1c-8.9,16.5,0.6,56.9-3.3,77.1c-6.2,31.8-25.8,43.1-41.1,48.3c14.6,37.5,63.3,41.4,63.3,41.4v22.2c-1,0-10.6,3.3-18.2,29.5c-1,0.6,1.3,3.7,3.7,4.7c60.2,25.2,96.7,50.1,96.7,90.1v106.7H612c0,0,0.4-122.5,0-130.2c-1.3-23.9-101.3-56.3-128.2-71.2C476.5,474.8,466.8,471.5,465.9,471.5L465.9,471.5z"/></svg>');`

并添加为background-image：

 .logo-white {
    background: @logo center center no-repeat;
    background-size: auto @logo-h;
    width: 5rem;
    height: @logo-h !important;
    z-index: 1000000;
}

我希望能够通过CSS更改填充颜色，这是我可以做到的任何方式吗？

Answer 1

这是可能的，但您需要重做如何使用SVG文件。您不是通过CSS调用它，而是在文档的开头加载SVG，然后您可以调用图像在文档中的<use xlink:href="#id"></use>，然后您可以应用fill属性。

因此，例如，将SVG内联加载到文档中，如下所示：

<!DOCTYPE html>
<html>
<head></head>
<body>

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <defs>
        <g id="shape">
            <rect width="100%" height="100%" />
        </g>
    </defs>
</svg>

</body>
</html>

然后在显示该图像的HTML中，像这样引用SVG：

<svg viewBox="0 0 300 200">
    <use xlink:href="#shape"></use>
</svg>

然后，您可以使用<svg>属性设置fill的样式。

.red svg {
    fill: red;
}
.blue svg {
    fill:blue;
}

请参阅demo fiddle或find out more about this trick。

更新：您确实提到了背景图片。如果您必须在CSS中使用background-image，这将无效。据我所知，它只适用于这样的内联SVG（不是外部SVG，使用<img>标记调用的SVG或CSS background-image）。

svg作为背景图像颜色变化

1 个答案: