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

Question

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

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

我需要将#first 图标设置为红色。

我花了近 2 个小时来找到执行此操作的方法，但我找不到。

Answer 1

首先，您缺少 <svg>段落中的开始标记。其次，您需要删除符号上的 fill 属性，然后您将能够使用 CSS 指定每个 svg 的颜色，如下所示:

#first svg {
  fill: red;
}
#second svg {
  fill: #fcc083;
}

<svg style="display: none">
  <symbol id="icon-check-mark-3" viewBox="0 0 200 200">
    <title>check-mark-3</title>
    <path 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
  <svg>
    <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>

<p id="second">my second image
  <svg>
    <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>