如何在 CSS 中使用 SVG 符号？答案

【问题标题】：How to use SVG symbols in CSS?如何在 CSS 中使用 SVG 符号？
【发布时间】：2014-09-30 18:07:06
【问题描述】：

Using symbols in SVG formats 对我来说似乎是个好主意，因此您只能加载单个 SVG 文件，并将其用作一种 spritemap。

但我感觉不对，直接在我的 html 中包含 <svg></svg> 标记作为图标，因为它们只是演示，应该添加到我的 CSS 中。

有没有办法在我的 CSS 中的 :after 伪元素中添加来自 svg 的符号？

【问题讨论】：

当然——您可以将它们存储为外部*.svg 文件，并使用.classname:after { content: url(/path/to/file.svg); } 添加它们
或者您可以将它们编码为 CSS 文件本身中的数据 URL。
我想使用符号，而不是整个 svg，因为我想将它用作“spritemap”。
@enyo 你有什么办法让它工作吗？
看来你最好使用<view> 而不是<symbol> 见这里：css-tricks.com/svg-fragment-identifiers-work

标签： css html svg

【解决方案1】：

正如 Blazemonger 在评论中提到的，您可以在 afterelement 的 content 中提供它。

但是，如果您将其设置为 background 或 after，您将可以更好地控制它的 size、position 以及背景图像可以具有的任何其他属性

html

<div id = "mydiv"><div>

css

#mydiv{
    width:500px;
    height:100px;
    background:tomato;
}

#mydiv:after{
    content:"After of #mydiv";
    width:500px;
    height:100px;
    background:url('http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg') no-repeat;
    position:absolute;
    top:200px;
    border:solid 1px tomato;
}

您可以将 svg 保存为单独的文件，并将其指定为 url for background DEMO

阅读更多关于将 SVG 添加到页面here的方法

【讨论】：

是的，但是您必须链接整个 SVG，而不是可能构成OP 提到的SVG 文件一部分的单个符号或def。
我想使用符号，而不是整个 svg，因为我想将它用作“spritemap”。
@enyo 您可以调整背景位置以将其用作精灵图。
我知道。我想使用符号。

【解决方案2】：

您可以通过这种方式在 CSS 中引用片段（片段必须有 ID 才能识别）：

.element {
background-image: url('vector.svg#fragment');
}

你也可以通过 viewBox 裁剪来显示特定区域：

.element {
background-image: url('vector.svg#fragment(viewBox(0,0,25,25))');
}

您可以在此处阅读有关此方法的更多信息： http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/

另一种方法是使用图标字体创建所有符号。

【讨论】：

对片段的限制目前在 Chrome 62 中似乎不起作用。jsfiddle.net/b2n5tude
OP 在谈论符号。此处显示的方法是使用 VIEWS。不同的技术。