Question

我有大量的动态列表，这些列表引用了大量单独的（生成的）SVG（风格化的首字母缩写词）。

我不喜欢将生成的SVG放在单独的文件中，因为它会创建成百上千的请求。即使使用HTTP / 2，我也不希望这种解决方案。我觉得它会造成不必要的开销。

我每次都不喜欢完整的SVG。它为所有相同的首字母缩略词创建重复的数据（一个项目可以在页面上多次出现），然后它是一个高度动态的页面：我感觉更改背景图像比用SVG更改DOM快得多

因此：是否可以引用文档中其他地方定义的SVG？

我正在寻找类似的东西：

<!-- generated by server -->
<div style="display: hidden;"> 
    <svg id="acronym-abc">
        [...]
    </svg>
    <svg id="acronym-xyz">
        [...]
    </svg>
</div>

<!-- generated by client -->
<ul>
    <li style="background: SVG(id=acronym-abc)"></li>
    <li style="background: SVG(id=acronym-xyz)"></li>
    <li style="background: SVG(id=acronym-abc)"></li>
    [...]
</ul>

更新

从我的问题尚不清楚，但我更喜欢可以与background-image结合使用并支持IE9的功能。否则，我会接受@ web-tiki的回答。

Answer 1

您可以使用3.3.1元素，并使用<symbol>标签引用每个符号。
这不会作为背景图像使用，但只允许您使用每个符号的实例。每次引用该符号时，您也都可以对其进行控制。

这里是一个例子：

<use>

有关MDN的更多信息：

是否可以引用HTML文档中其他地方定义的SVG？

1 个答案: