我们可以跨多个 <svg> 元素引用 <defs> 的内容吗？

Question

我们可以<svg>从另一个引用包含在一个中的 defs 的内容<svg>吗？

Answer 1

当然你可以... 只需将一个作为可供其他人使用的资源..

例子：

#fire1 {
  fill: red;
}

#fire2 {
  fill: green;
}

#fire3 {
  fill: blue;
}

<!-- Let's make it a resource :) -->
<svg width="0" height="0" viewBox="0 0 0 0">
  <title>Re-Use SVG Defs as Resource</title>
 <defs>
   <g id="fire" transform="translate(0,10)">
     <path d="M101.138,160.949 C94.916,154.464 53.538,110.17 95.277,71.802 C130.054,39.868 135.137,13.003 123.434,-0 C123.434,-0 211.959,33.692 159.877,111.877 C150.998,125.163 128.702,140.843 140.369,173.129 L101.138,160.949 z" />
     <path d="M155.503,171.572 C153.624,165.019 145.142,150.746 171.021,122.303 C184.873,107.172 190.104,84.742 191.308,76.301 C191.308,76.301 237.167,100.662 191.576,160.215 L155.503,171.572 z" />
   </g>
 </defs>
</svg>


<svg id="fire1" width="100" height="100" viewBox="0 0 300 300">
  <use xlink:href="#fire"/>
</svg>

<svg id="fire2" width="100" height="100" viewBox="0 0 300 300">
  <use xlink:href="#fire"/>
</svg>

<svg id="fire3" width="100" height="100" viewBox="0 0 300 300">
  <use xlink:href="#fire"/>
</svg>

代码笔

如果您只是想将一个 svg 嵌入到另一个 svg 中（其中包括其中的 defs），您也可以直接image插入另一个 svg，例如；

<svg id="fire1" width="100" height="100" viewBox="0 0 300 300">
   <use xlink:href="#fire"/>
   <image width="100" height="100" xlink:href="SomeOtherSVGImage.svg" />
</svg>