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

Question

我创建了一个SVG徽标，并希望将其动画化到React组件中。在我的SVG中，我有3种不同的渐变:绿色、橙色和红色。我注意到，当我试图通过className分配一个梯度到另一个元素，它填充它只是一个普通的颜色。你能告诉我我哪里做错了吗?

代码如下:https://codesandbox.io/s/shy-moon-zs1ik5

Answer 1

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

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

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

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