有什么方法可以从 CSS 使用 SVG Sprite 吗？

Question

HTML：

\n

<svg>\n    <use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>\n</svg>\n

\n

SVG 精灵：

\n

<svg width="0" height="0" class="hidden">\n    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">\n        <path ... fill="currentColor"></path>\n    </symbol>\n</svg>\n

\n

有没有办法从 CSS 使用 SVG sprite

\n

像这样

\n

<div class=\xe2\x80\x9cicon\xe2\x80\x9d></div>\n\n.icon {\nbackground-image: \xe2\x80\x9c/assets/images/icons-sprite.svg#icon-name\xe2\x80\x9d\nheight: 30px\n\n}\n

\n

Answer 1

I\xe2\x80\x99m 使用此处描述的包含 SVG 的技术，您可以创建一个看起来像这样的文档\xe2\x80\xa6

\n

<svg xmlns="http://www.w3.org/2000/svg">\n\n    <symbol id="arrow-left" viewBox="0 0 10 16">\n        <path d="M9.4 1.4L8 0 0 8l8 8 1.4-1.4L2.8 8z"/>\n    </symbol>\n\n    <symbol id="arrow-right" viewBox="0 0 10 16">\n        <path d="M0 14.6L1.4 16l8-8-8-8L0 1.4 6.6 8z"/>\n    </symbol>\n\n</svg>\n

\n

将其包含在 HTML 的顶部，然后将 SVG 图标插入标记中，如下所示\xe2\x80\xa6

\n

<svg class="arrow-right">\n  <use xlink:href="#arrow-right" />\n</svg>\n

\n

它\xe2\x80\x99s 很简单，而且效果很好。但是，我\xe2\x80\x99m 尝试在 CSS 伪类 :before 和 :after 使用空内容属性和后台中的 SVG 中使用相同的图标。像这样\xe2\x80\xa6

\n

.title:after {\n    float: right;\n    width: 16px;\n    height: 10px;\n    content: "";\n    background: url('#arrow-right');\n}\n

\n