在多个位置显示内联SVG

问题描述 投票：0回答：1

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

html svg
1个回答
10
投票

您可以使用 

<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.