在 HTML 页面上将 <symbol> 与 <use> SVG 标签组合

Question

我试图在 HTML 页面中组合“符号”和“使用”SVG 元素，但似乎无法让它发挥作用。

我使用“symbol”在页面顶部的 div 中声明了原始图形，然后用“use”调用它。原始图形随即显示。

当我尝试进一步重复它时，它没有显示。当我检查页面时，尽管没有显示/渲染并且显示了 svg“阴影根”，但还是为该元素分配了一些空间。

任何帮助都是极好的。

#box1, #box2 {width: 300px;}

<div id="box1">
  <symbol id="shapes-square" viewBox="0 0 352.16 240.77">
    <svg id="square" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195.74 129.42">
      <title>Blue Square</title>
      <rect x="0.5" y="0.5" width="194.74" height="128.42" fill="blue" stroke="#000" stroke-miterlimit="10"/>
    </svg>
  </symbol>
</div>

<!-- Declare Initial 'use' of SVG -->
<svg>
    <use href="#shapes-square" />
</svg>

<br />

<!-- Div to hold the second 'use' of the SVG -->
<div id="box2">
   <svg>
    <use href="#shapes-square" />
  </svg>
</div>

Answer 1

该<symbol>标签必须包含在 中<svg>才能供您随后使用。请查看这篇文章，它可以进一步帮助您https://css-tricks.com/svg-symbol-good-choice-icons/

#box1, #box2 {width: 300px;}

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">  
  <symbol id="shapes-square" viewBox="0 0 195.74 129.42"> 
      <rect x="0.5" y="0.5" width="194.74" height="128.42" fill="blue" stroke="#000" stroke-miterlimit="10"/>
  </symbol>
</svg>

<!-- Declare Initial 'use' of SVG -->
<div id="box1">
  <svg>
      <title>Blue Square 1</title>
      <use href="#shapes-square"/>
  </svg>
</div>

<br />

<!-- Div to hold the second 'use' of the SVG -->
<div id="box2">
   <svg>
      <title>Blue Square 2</title>
    <use href="#shapes-square" />
  </svg>
</div>