SVG 线性渐变不适用于其他元素

亚历山大·列别杰夫

我创建了一个 SVG 徽标并希望在 React 组件中对其进行动画处理。在我的 SVG 中，我有 3 种不同的渐变：绿色、橙色和红色。我注意到，当我尝试通过 className 将渐变分配给另一个元素时，它只用纯色填充它。你能帮我理解我在这里做错了什么吗？

这是代码：https ://codesandbox.io/s/shy-moon-zs1ik5

着迷的

您有一个 cx="1202.5" cy="249.5" 和 r="18.5" 半径的渐变。它位于第一个矩形的中心，但远离第二个矩形的中心。这个填充是渐变的外围红色。

一个可能的解决方案是<use>为您拥有的所有相同路径使用与元素相同的路径。接下来，您为使用提供所需的类。

请注意我已将路径放在defs. xlink:href路径也有一个用于use 元素的 id 。

.red-light{fill: url(#red-gradient);}

<svg viewBox="700 230 200 200">
  <defs>
    <radialGradient id="red-gradient" cx="1202.5" cy="249.5" r="18.5" gradientUnits="userSpaceOnUse">
      <stop offset="0.04" stop-color="#fff"></stop>
      <stop offset="0.12" stop-color="#fef4f3"></stop>
      <stop offset="0.28" stop-color="#fad8d4"></stop>
      <stop offset="0.49" stop-color="#f4aba1"></stop>
      <stop offset="0.74" stop-color="#eb6b5b"></stop>
      <stop offset="1" stop-color="#e1230a"></stop>
    </radialGradient>

    <path id="indicator" d="M1216.65,268h-28.3a4.69,4.69,0,0,1-4.35-4.35v-28.3a4.69,4.69,0,0,1,4.35-4.35h28.3a4.69,4.69,0,0,1,4.35,4.35v28.3C1221,268,1218.78,268,1216.65,268Z"></path>
  </defs>

  <use xlink:href="#indicator" id="indicator-3" data-name="indicator-3" class="red-light" transform="translate(-420)" />

  <use xlink:href="#indicator" id="indicator-10" data-name="indicator-10" class="red-light" transform="translate(-460,50)" />

</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。