Question

我正在尝试使用外部svg文件使用#fragment标识符将svg堆栈中的特定元素链接到按钮元素的“背景图像” /“内容”。即：

Button1 - background-image: url(icons.svg#fragment1);
Button2 - background-image: url(icons.svg#fragment2);

外部icons.svg包含大量碎片，而且很大。一切在所有浏览器中都能完美运行。但是，对于仅需要一个特定片段的每个按钮，它将加载整个svg。最后，（假设）有10个按钮，我已经加载了整个svg的10个实例。理想的解决方案（IMHO）是将“ use”标签与“ inlined” SVG一起使用，但据我所知，这种组合将无法工作。对于我的特殊情况，使用URI编码的片段不是解决方案。最好的方法是什么？

Answer 1

如果将svg用作按钮元素的子元素，则可以避免使用背景图片。

要将不同的图标用于不同的状态，可以添加多个图标，并仅根据按钮的状态使它们可见。

(?:\-\ |\d\.\ )(.+)

button:hover use.hover,
button:active use.active {
    display: inline;
}
button use:not(.default),
button:hover use.default,
button:active use.default,
button:active use.hover {
    display: none;
}

外部svg的多个实例

1 个答案: