时间戳

首页 > 解决方案 > 是否可以引用 HTML 文档中其他地方定义的 SVG？

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

问题描述

我有巨大的动态列表，它们引用大量单独（生成）的 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>

更新

我的问题并不清楚，但我偏爱可以与 IE9 结合使用background-image并支持 IE9 的东西。否则我会接受@web-tiki 的回答。

标签： htmlcssimagesvg

解决方案

您可以使用该元素并使用标签<symbol>引用每个符号。 这不能用作背景图像，但它只允许您拥有每个符号的实例。每次引用符号时，您还可以控制符号的样式。<use>

这是一个例子：

<svg width="0" height="0">
  <symbol id="circle" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r=".7" />
  </symbol>
  <symbol id="square" viewBox="0 0 2 2">
    <path fill="darkorange" d="M.5 .5 H1.5 V1.5 H.5z" />
  </symbol>
</svg>
<p>
  <svg width="50" height="50"><use xlink:href="#circle" /></svg>
  <svg width="50" height="50"><use xlink:href="#circle" fill="teal" stroke="red" stroke-width=".1"/></svg>
  <svg width="50" height="50"><use xlink:href="#square" /></svg>
  <svg width="50" height="50"><use xlink:href="#square" fill-opacity=".5"/></svg>
</p>

有关 MDN 的更多信息：

推荐阅读