具有不同渐变颜色的可重复使用的 SVG

Question

根据我的要求，我需要在其中应用不同渐变颜色的成形路径。仅以这里为例，我正在绕圈并尝试做同样的事情。

代码如下：

.box--blue{
  fill: blue;
}

.box--red{
  fill: red;
}

<div>
  <svg>
    <defs>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="transparent"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
    </defs>
    <symbol id="gra2" viewbox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50" fill="url(#Gradient2)" />
    </symbol>
</svg>
</div>


<div class="box box--red">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>

<div class="box box--blue">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>

要求：

通过重用可用的 SVG，我需要这两个具有不同颜色的渐变形状。

浏览器支持：IE10+、chrome 和 Firefox。

注意：我不想在 SVG 下对每个与颜色相关的渐变进行硬编码。渐变色应该可以继承。这就是我可以重用 SVG，IMO 的方式。

Answer 1

你想要的都是不可能的。

我认为你能得到的最接近的方法是使用特殊颜色 currentColor 将 CSS color 的当前值传递给符号。您可以将其传递给符号，但不能传递给渐变。所以你需要用它来为一个圆圈着色。然后在上面放一个渐变。但是，在此解决方案中，圆圈显然不能像您的示例中那样部分透明。

.box--blue {
  color: blue;
}

.box--red {
  color: red;
}

<div>
  <svg>
    <defs>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="white"/>
        <stop offset="100%" stop-color="transparent"/>
      </linearGradient>
    </defs>
    <symbol id="gra2" viewbox="0 0 100 100">
      <circle cx="50" cy="50" r="50" fill="currentColor" />
      <circle cx="50" cy="50" r="50" fill="url(#Gradient2)" />
    </symbol>
</svg>
</div>


<div class="box box--red">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>

<div class="box box--blue">
  <svg>
    <use xlink:href="#gra2"></use>
  </svg>
</div>