在 HTML 页面上结合 <symbol> 和 <use> SVG 标签

Question

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

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

当我尝试进一步向下重复时，它不会显示。但是，当我检查页面时，尽管它没有显示/渲染并且 svg 'shadow root' 正在显示，但仍有一些空间被分配给这个元素。

任何帮助都会很棒。

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

Answer 2

交换标签<symbol>和<svg>

<symbol> 用于临时隐藏内容，它最近被使用，最常用于精灵，因为它有自己的内部viewBox，用于额外定位元素。

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

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

将来，您可能希望对克隆对象使用样式。在这种情况下，可能会有一些细微差别：

• 当您使用 <use> 重用内容时，它会进入影子 DOM

  并且无法从外部表中更改克隆对象的样式CSS
  要消除此缺陷，您可以强制继承 svg 元素的属性。

  rect{ fill:inherit; stroke:inherit; stroke-width:inherit; }

• 另外可以使用x和y里面的坐标 <use> 用于克隆对象的附加定位。

  <use class="use1" x="0" y="10" href="#shapes-square" />

以下是克隆对象样式的示例

  rect{
 fill:inherit;
 stroke:inherit;
 stroke-width:inherit;
 }
.use1{ fill:red;} 
.use2{ fill:yellowgreen;} 
.use3{ fill:dodgerblue;} 

 #box1, #box2, #box3 {
 background:#D5D5D5;
 width: 400px; 
 margin:4px;
 }

<div>
  
    <svg id="square" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="195" height="129 "viewBox="0 0 195.74 129.42">
<symbol id="shapes-square" 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"/>
   </symbol>  
  </svg>
  
</div>

<div id="box1">
<svg>
    <use class="use1" x="0" y="10" href="#shapes-square" />
</svg>
</div>


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

<div id="box3">
   <svg>
    <use class="use3" x="20" y="10"  href="#shapes-square" />
  </svg>
</div>