Html SVG SpriteSheet使用CSS中的符号CSS SVG片段作为背景：url或类似？如果不是，为什么？

我们可以这样做吗？ 使用符号CSS SVG片段在CSS中用作背景：url或类似？ 在我看来，在所有其他条件相同的情况下，符号的使用是不起作用的，而G和单独的viewbox是起作用的。如果不能做到这一点，为什么？有没有更好的方法制作SVG SpriteSheet

SYMBOL有一个ID，有一个viewBox..我是做错了什么还是使用了SYMBOL inc.viewBox，VS，separate viewBox&g=不起作用？哦

我是否做错了什么，或者，下面的CSS SVG片段用法是否只适用于单独的viewbox和G（而不适用于带有viewbox的符号）

符号SVG

<symbol xmlns="http://www.w3.org/2000/svg" transform="rotate(360)" viewBox="0 0 24 24" id="basket">
    <path fill="none" stroke="#626262" stroke-width="2" d="M2 12h20l-2 11H4L2 12zm18-4l-6-7M4 8l6-7M1 8h22v4H1V8zm7 7v5m8-5v5m-4-5v5"></path>
    <path fill="rgba(0, 0, 0, 0)" d="M0 0h24v24H0z"></path>
</symbol>

<view id="icon-clock-view" viewBox="0 0 32 32" />
<g id="icon-clock">
    <path d="M20.6,23.3L14,16.7V7.9h4v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z
         M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
</g>

---

这似乎效果很好。以“名称”为例进行说明

在

中包装

，

，我没有使用

将

id=“name”

添加到

中，例如

在符号标记之外，添加一个

和一个

。完整文件上载到的URL和视图ID将成为SVG片段

<view id="icon-name-view" viewBox="0 1240 16 16" />
<use xlink:href="#icon-name" width="16" height="16" x="0" y="1240" id="name"></use>

为了改变颜色，我使用了滤光片，例如

filter: invert(80%) sepia(21%) saturate(872%) hue-rotate(44deg) brightness(84%) contrast(91%);

可以使用ViewBox的进行定位，但我也使用了transform、translate

transform: translateY (10px);

---

希望你觉得这有用，我希望写一个完整的指南，并将链接它时，我这样做。谢谢。

嵌套在

中的形状不会显示，除非由

元素引用。您可以改用嵌套的svg。请阅读这篇关于井的文章，这很烦人！为什么不把它作为标准呢？很傻还是有原因？还有其他东西成为这种东西的标准用途吗？

filter: invert(80%) sepia(21%) saturate(872%) hue-rotate(44deg) brightness(84%) contrast(91%);

transform: translateY (10px);