在多个位置显示内联 SVG

【问题标题】：Display inline SVG in multiple locations在多个位置显示内联 SVG
【发布时间】：2013-07-12 04:52:07
【问题描述】：

使用 HTML5，如何将内联 SVG 放置一次，然后在多个位置显示？我希望 SVG 代码不显示它的放置位置，而是显示在引用它的多个位置，而不依赖于 CSS。有一个稍微相关的question。

【问题讨论】：

标签： html svg

【解决方案1】：

您可以使用<use> 标签在多个位置显示 SVG。

<body>
    <svg width="0" height="0">
      <defs>
        <rect id="MyRect" width="60" height="10" fill="blue"/>
      </defs>
    </svg>
    <svg width="50" height="50">
      <use x="20" y="10" xlink:href="#MyRect" />
    </svg>
    <svg width="50" height="50">
      <use x="20" y="10" xlink:href="#MyRect" />
    </svg>
</body>

【讨论】：

它可以工作，但是
制作包含宽度/高度 0 的 svg