Question

我们可以从另一个$ lein uberjar $ java -jar packr.jar config.json引用一个<svg>中包含的defs的内容吗？

Answer 1

当然可以......只需将其中一个作为资源提供给其他人......

示例：

＆＃13;

#fire1 {
  fill: red;
}

#fire2 {
  fill: green;
}

#fire3 {
  fill: blue;
}

＆＃13;

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

＆＃13;

CodePen

如果您只是想将一个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>

Answer 2

是的，通过引用xlink:href元素的use属性中的svg文件。

<use xlink:href="path-to-file.svg#myDef" />

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

2 个答案: