Question

我想知道在使用SVG时是否有办法通过CSS访问SVG：

.logo {
...
  background-image: url("../VectorImages/logo.svg");
}

我找到了一些脚本，帮助将svgs转换为内联SVG，这使得CSS可以访问它们。尝试过它，它适用于img-Tags，但是当使用SVG作为div的背景图像时，这些解决方案都不起作用。

我正在尝试更改SVG的颜色，所以我想要做的是

svg path { fill: #000; }

Answer 1

如果您使用SCSS - 我已经制作了一个mixin来处理SVG编码

笔：http://codepen.io/jakob-e/pen/doMoML/

SCSS：http://codepen.io/jakob-e/pen/GjgXmK.scss

$color-1: red;
$color-2: green;

$svg-1: '<svg viewBox="0 0 2 2"><circle fill="#{$color-1}" cx="1" cy="1" r="1"/></svg>';
$svg-2: '<svg viewBox="0 0 2 2"><circle fill="#{$color-2}" cx="1" cy="1" r="1"/></svg>';

.class-1 { @include background-svg($svg-1); } 
.class-2 { @include background-svg($svg-2); }

Answer 2

您可以使用data URI将 SVG 导入CSS。

<强> HTML

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

<强> CSS

.logo {
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

使用此方法，您可以使用fill为 SVG 着色，同时将其用作background。

注意：有关使用{strong> CSS 中的data URI实施 SVG 的详细信息，请参阅this article。

使用CSS修改SVG作为背景图像

2 个答案: