Question

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

我已经使用'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>

Answer 2

交换代码<symbol>和<svg>

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

当您使用<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" />

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

＆＃13;

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

＆＃13;

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

＆＃13;

在HTML页面上将<symbol>与<use> SVG标记相结合

2 个答案: