Question

我有一些轮廓类型的图像，它们需要能够改变颜色，有时只是为了显示在不同的位置，有时候是为了悬停效果。

这很容易与直接嵌入到HTML中的SVG一起使用。复制粘贴和CSS是您心中的愿望。

但是我必须复制粘贴或以编程方式插入我想要的任何地方。其中一些使用了数十次。重复重新传输相同的SVG标记似乎很糟糕。

是否存在两全其美的解决方案，我可以在CSS中使用CSS并在某种程度上重复使用前端的SVG？

Answer 1

svg中有一个标签，让您重复使用＆＃34;符号＆＃34;。我认为这和你一样接近。

您可以通过将路径等包装在symbol-element中来创建符号。给它一个id（以便以后可以重复使用）：

<svg style="display: none;">
  <symbol id="ic">
      <paths and polygons and other fun stuff>
  </symbol>
</svg>

现在，您可以重复使用此符号，<use>和xlink:href指向您创建的符号。您可以自由添加类来改变：

<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#ic" class="ic-blue"  x="0" y="0" />
</svg>

来自https://tympanus.net/codrops无耻地摘录的示例和代码去阅读他们的内容并点击他们的广告！如果广告拦截器中存在一个值得例外的网站，就是这样。

https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

＆＃13;

body {
  padding: 2em;
}
svg {
  width: 100px;
  height: 125px;
  border: 1px solid #ddd;
}
use.ic-1 {
  fill: skyblue;
}
use.ic-2 {
  fill: #FDC646;
}
use.ic-3 {
  fill: #FF2D49;
}

svg path {
  fill: inherit;
}

＆＃13;

<svg style="display: none;">
  <symbol id="ic">
    <path fill="#000000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844  c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442  c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933  c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04  c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z   M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929  C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907  c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48  c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631  c0,1.684-0.914,3.148-2.266,3.958H25.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z   M50.01,86.723L27.73,49.13h44.541L50.01,86.723z"/>
  </symbol>
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use class="ic-1" xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use class="ic-2" xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use class="ic-3" xlink:href="#ic" x="0" y="0" />
</svg>

＆＃13;

在保持CSS控制的同时重用SVG图像

1 个答案: