Question

我定义了一个像这样的svg图标

＆＃13;

<svg style="display: none">
  <symbol id="icon-check-mark-3" viewBox="0 0 200 200">
    <title>check-mark-3</title>
    <path fill="#fcc083" class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path>
  </symbol>
</svg>


<p id="first">my first image
  <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>

<p id="second">my second image
  <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>

＆＃13;

我需要将#first图标换成红色。

我花了近2个小时才找到办法，但我不能。

Answer 1

使用fill =＆＃34; currentColor＆＃34;通过color css属性为svgs设置颜色。

＆＃13;

.red {
  color: red;
}

.green {
  color: green;
}

svg {
  width: 12px;
  height: 12px;
}

＆＃13;

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="12" height="12" viewBox="0 0 12 12">
  <path fill="currentColor" id="delete" d="M7.249,5.977 C7.249,5.977 11.863,10.606 11.863,10.606 C11.978,10.724 11.975,10.917 11.856,11.039 C11.856,11.039 11.036,11.877 11.036,11.877 C10.917,11.998 10.726,12.001 10.611,11.883 C10.611,11.883 5.992,7.248 5.992,7.248 C5.992,7.248 1.308,11.850 1.308,11.850 C1.194,11.966 1.005,11.963 0.887,11.843 C0.887,11.843 0.076,11.014 0.076,11.014 C-0.043,10.893 -0.046,10.701 0.069,10.584 C0.069,10.584 4.659,5.977 4.659,5.977 C4.659,5.977 0.069,1.368 0.069,1.368 C-0.046,1.251 -0.043,1.060 0.076,0.939 C0.076,0.939 0.887,0.110 0.887,0.110 C1.005,-0.011 1.194,-0.013 1.308,0.104 C1.308,0.104 5.992,4.704 5.992,4.704 C5.992,4.704 10.611,0.070 10.611,0.070 C10.726,-0.048 10.917,-0.045 11.036,0.076 C11.036,0.076 11.856,0.914 11.856,0.914 C11.975,1.035 11.978,1.230 11.863,1.347 C11.863,1.347 7.249,5.977 7.249,5.977 Z" />
</svg>

<p class="red">
  <svg>
    <use xlink:href="#delete"></use>
  </svg>
  red
</p>

<p class="green">
  <svg>
    <use xlink:href="#delete"></use>
  </svg>
  green
</p>

＆＃13;

从一个符号svg应用不同的CSS到<use>标签？

1 个答案: