我創建了一個 SVG 徽標并希望在 React 組件中對其進行影片處理。在我的 SVG 中，我有 3 種不同的漸變：綠色、橙色和紅色。我注意到，當我嘗試通過 className 將漸變分配給另一個元素時，它只用純色填充它。你能幫我理解我在這里做錯了什么嗎？
這是代碼： https ://codesandbox.io/s/shy-moon-zs1ik5
uj5u.com熱心網友回復：
您有一個 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489933.html