在多个位置显示内联SVG

时间:2013-07-11 17:20:40

标签: html svg

使用HTML5,如何在多个位置显示内联SVG?我希望SVG代码不显示它所在的位置,而是显示在引用它的多个位置,而不依赖于CSS。有一点点相关question

1 个答案:

答案 0 :(得分:7)

您可以使用<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>