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

Question

我正在尝试将 'symbol' 和 'use' SVG 元素组合到 HTML 页面中，但我似乎无法让它发挥作用。

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

当我尝试再往下重复时，它没有显示。但是，当我检查页面时，尽管该元素未显示/呈现并且显示了 svg 'shadow root'，但仍为该元素分配了一些 space。

任何帮助都会很棒。

#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> 用于临时隐藏内容，最近使用，最常用于 sprite，因为它有自己的内部 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>

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

Combining <symbol> with <use> SVG tags on a HTML page

html

svg

symbols