是否可以将 SVG 指定为背景图像并在同一个 CSS 文件中设置 SVG 样式？
我很喜欢将 SVG 图像放置、缩放和剪辑为单个文件或 sprite，但我无法确定是否可以在同一个 CSS 文件中设置 SVG 样式以将其设置为背景图片。
在伪 CSS 中，我想根据父元素的类来改变简单形状的颜色：
element1 {
background-image(icon.svg);
}
element1.black .svg-pathclass {
fill: #000000;
}
element1.white .svg-pathclass {
fill: #ffffff;
}
显然，这假定 SVG 中的路径具有类 .svg-pathclass
这可能吗？
【问题讨论】：
不，这是不可能的。 SVG 必须在一个文档中准备好（可能是data URI 或外部引用的文件），然后然后在另一个文件中用作背景。
【讨论】：
您可以使用SVG 和CSS 蒙版重新创建此效果，然后使用普通CSS 设置SVG 内部的样式，甚至background-image
-webkit-mask: url(filename.svg) 50% 50% / 100px 50px no-repeat;
-o-mask: url(filename.svg) 50% 50% / 100px 50px no-repeat;
-ms-mask: url(filename.svg) 50% 50% / 100px 50px no-repeat;
background-color: red;
background-image: url(animated.gif);
/* Filename, Position / Size, Repeat */
/* Modernizr.cssmask is the test needed to pass - snippet below */
您可以通过将element 附加到DOM 并设置样式，使用较低的z-index 并设置不透明度来使用它来创建阴影。
希望有帮助！
编辑：链接
【讨论】：
实际上，对于那些可以在生产中使用预处理器的人来说，通过“内联”背景 SVG 和一些 SASS mixins（其中“切片”整个 svg 胡言乱语）来访问您想要通过以下方式操作的部分SASS variables。
在您的原始场景中，您有一个元素<div class="element1"></div>,
所以你需要一个mixin/function 它将为你内联SVG。假设你想控制fill，所以：
@mixin inline-svg($color, $svg-content) {
$start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
$end: '</svg>';
background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}
其中$svg-content 变量是您的<svg> 内容，不包括<style> 元素（您希望从mixin 内部访问）和包装svg 标记，即：
$svg-content = "<path .... />"
这只需要包含在内部传递的值中：@include inline-svg(salmon, $svg-content);
总而言之，这是一个示例 SASS 代码：
$svg-content = "<path .... />"
@mixin inline-svg($color, $svg-content) {
$start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
$end: '</svg>';
background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}
.element1 {
@include inline-svg(rgba(0,0,0,0.6), $svg-content);
}
我认为这里的可能性很大（这种方法也有局限性）。实际上，我将SASS map 传递给我的mixin，其中css 样式定义为key、value 对，以将整个css 样式注入svg 的<style> 部分。
所以这在技术上是可行的，但需要更多的复杂性，但是一旦你完成了这项工作，你将受益于在整个项目中重用这个mixin，这很酷。
【讨论】：
data-mode 属性。请求是使用单个 SVG 以最小的占用空间促进交互。但是很好的例子
通过单独的 CSS 类为 SVG 设置样式对我不起作用，但内联样式可以：
&::after {
content: url("data:image/svg+xml;charset=UTF-8, <svg viewBox='0 0 14 24' xmlns='http://www.w3.org/2000/svg' width='12px' height='18px'><path fill='rgb(13, 132, 254)' d='M2.1.1L0 2.2l8.3 8.3L9.8 12l-1.5 1.5L0 21.8l2.1 2.1L14 12z' /></svg>");
}
注意：将 fill 属性指定为十六进制颜色是行不通的，即使在“普通”SVG 中也可以，这就是为什么我将其转换为 RGB 并以这种方式设置样式的原因。
【讨论】：
urlencode fill 颜色，因为它是一个链接，主要意味着将# 转换为%23，因此#fafafa 的颜色将变为fill="%23fafafa" 或fill="%23red"
阅读所有这些答案后，我想出了一种在 SASS (.scss) 中处理 SVG 的好方法，它编译 CSS，用于我的样式主题，并且还让 color 工作。对于我的用例，我想（需要）使用content: url(..svg)，因为我的库支持字体，现在通过在伪content: $my-icon; 中使用content: $my-icon; 支持SVG，这是唯一同时适用于字体/SVG 的东西。
首先是创建一个SASS函数来处理颜色的urlencode（因为content: url()需要编码，#需要变成%23）。作为参考，我从别人Gist那里复制了这个函数。例如，这将采用#fafafa 并返回%23fafafa，然后我可以在SVG 的fill 中使用它。您也可以不使用它，只需记住将fill 属性中的# 更改为%23。
/* sass-utilities.scss */
@function encodecolor($string) {
@if type-of($string) == 'color' {
$hex: str-slice(ie-hex-str($string), 4);
$string:unquote("#{$hex}");
}
$string: '%23' + $string;
@return $string;
}
我的 lib 有一些为主题样式定义的 SASS 变量，所以这就是我使用字体和/或 SVG 所做的工作（我添加了 width 和 display，但它也可以不使用）。
.sort-indicator-desc:before {
content: $icon-sort-desc;
display: inline-block;
width: $icon-sort-font-size;
font-size: $icon-sort-font-size;
}
最终用户仍然可以将它与字体系列（如 Font Awesome 4）一起使用
/* with a Font */
$icon-font-family: "FontAwesome"; // Font Awesome 4
$icon-sort-color: #0070d2;
$icon-sort-font-size: 13px;
$icon-sort-asc: "\f0d8"; // unicode value of the icon
$icon-sort-desc: "\f0d7";
// this compiles to => `content: "\f0d8";
或使用 SVG（如 Font Awesome 5）
@import './sass-utilities'; // sass helper
/* with SVG */
$icon-sort-color: #0070d2;
$icon-sort-font-size: 13px;
$icon-sort-asc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24" id="arrowdown"><path d="M19.1 9.7c.4-.4.4-.9 0-1.3l-6.9-6.7c-.4-.4-.9-.4-1.3 0L4 8.4c-.4.4-.4.9 0 1.3l1.3 1.2c.3.4.9.4 1.3 0l2.1-2.1c.4-.4 1-.1 1 .4v12.5c0 .5.5.9 1 .9h1.8c.5 0 .9-.5.9-.9V9.2c0-.5.7-.8 1-.4l2.2 2.1c.4.4.9.4 1.3 0l1.2-1.2z"></path></svg>');
$icon-sort-desc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24" id="arrowdown"><path d="M4.4 14.3c-.3.4-.3.9 0 1.3l7 6.7c.3.4.9.4 1.2 0l7-6.7c.4-.4.4-.9 0-1.3l-1.3-1.2c-.3-.4-.9-.4-1.3 0l-2.1 2.1c-.4.4-1.1.1-1.1-.4V2.3c0-.5-.4-.9-.9-.9h-1.8c-.5 0-.9.5-.9.9v12.5c0 .5-.7.8-1.1.4L7 13.1c-.4-.4-1-.4-1.3 0l-1.3 1.2z"></path></svg>');
// this compiles to => `content: url('data:image/svg+xml,<svg>...');
所以最后，我让 Font 和 SVG 都与 SASS 变量一起工作，这很棒，因为这意味着我的 lib (Angular-Slickgrid) 的任何用户仍然可以使用 Font Awesome 4 图标（字体）而其他人可以也可以使用 SVG（如 Font Awesome 5），而无需安装字体家族（.eof，.woff，...），这取决于 lib。最终结果仍然是带有 content 的编译 CSS 文件，用于加载带有额外 fill SVG 颜色属性的 SVG。
然后瞧！我两全其美:)
【讨论】：