将 svg 中的混合模式与渐变颜色混合

Question

当滚动到具有相似渐变颜色的按钮时，我试图让我的徽标更改颜色，但我无法使其正常工作，有人可以帮我吗？ 谢谢！

这是我的标志。 我尝试在那里添加一些样式，但它们什么也没做。

<svg width="42" height="42" viewBox="0 0 42 42" fill="none style={{ isolation: 'isolate' }}" xmlns="http://www.w3.org/2000/svg">
<path style={{ mixBlendMode: 'multiply' }} d="M2.63155 21.3059C3.97381 21.3059 12.4599 20.2178 12.4599 18.8755C12.4599 17.5333 3.97381 16.4452 2.63155 16.4452C1.28929 16.4452 0.201172 17.5333 0.201172 18.8755C0.201172 20.2178 1.28929 21.3059 2.63155 21.3059Z" fill="url(#paint0_linear)"/>
<path style={{ mixBlendMode: 'multiply' }} d="M23.2542 41.9284C24.5964 41.9284 25.6846 40.8402 25.6846 39.498C25.6846 38.1557 24.5964 37.0676 23.2542 37.0676C21.9119 37.0676 15.7824 32.4128 15.7824 33.7551C15.7824 35.0973 21.9119 41.9284 23.2542 41.9284Z" fill="url(#paint1_linear)"/>
<path style={{ mixBlendMode: 'multiply' }} d="M9.21937 8.08144C11.0091 8.08144 25.6846 16.6146 25.6846 14.8249C25.6846 13.0352 11.0091 1.60042 9.21937 1.60042C7.42969 1.60042 5.97886 3.05125 5.97886 4.84093C5.97886 6.63061 7.42969 8.08144 9.21937 8.08144Z" fill="url(#paint2_linear)"/>
<path style={{ mixBlendMode: 'multiply' }} d="M28.9251 22.116C33.5657 46.5001 32.1656 20.6652 32.1656 18.8755C32.1656 17.0859 30.7148 15.635 28.9251 15.635C27.1354 15.635 25.6846 17.0859 25.6846 18.8755C25.6846 20.6652 27.1354 22.116 28.9251 22.116Z" fill="url(#paint3_linear)"/>
<path style={{ mixBlendMode: 'multiply' }} d="M40.4399 1.69001C38.5351 -0.214704 35.4704 -0.214704 33.5657 1.69001C33.4655 1.79026 33.3652 1.89051 33.2936 1.99075C33.2936 1.99075 8.27455 31.5926 8.27455 31.5639C7.73035 32.1941 7.77331 33.1536 8.3748 33.7551C8.97629 34.3566 9.92148 34.3852 10.5659 33.8553C10.5516 33.8696 40.1391 8.83626 40.1391 8.83626C40.2537 8.75033 40.3396 8.66441 40.4399 8.56416C42.3446 6.65945 42.3446 3.59472 40.4399 1.69001Z" fill="url(#paint4_linear)"/>
<path style={{ mixBlendMode: 'multiply' }} d="M9.50616 34.2442C10.401 34.2442 23.2542 33.7551 11.1264 32.624C11.1264 31.7291 13.3547 18.8755 12.4599 18.8755C11.565 18.8755 7.8859 31.7291 7.8859 32.624C7.8859 33.5188 8.61132 34.2442 9.50616 34.2442Z" fill="url(#paint5_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
<stop offset="0.102083" stop-color="#24688C"/>
<stop offset="0.440625" stop-color="#815FA3"/>
<stop offset="0.89375" stop-color="#FF05AA"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
<stop offset="0.102083" stop-color="#24688C"/>
<stop offset="0.440625" stop-color="#815FA3"/>
<stop offset="0.89375" stop-color="#FF05AA"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
<stop offset="0.102083" stop-color="#24688C"/>
<stop offset="0.440625" stop-color="#815FA3"/>
<stop offset="0.89375" stop-color="#FF05AA"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
<stop offset="0.102083" stop-color="#24688C"/>
<stop offset="0.440625" stop-color="#815FA3"/>
<stop offset="0.89375" stop-color="#FF05AA"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
<stop offset="0.102083" stop-color="#24688C"/>
<stop offset="0.440625" stop-color="#815FA3"/>
<stop offset="0.89375" stop-color="#FF05AA"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="1.06524" y1="41.0441" x2="45.9419" y2="-3.85208" gradientUnits="userSpaceOnUse">
<stop offset="0.102083" stop-color="#24688C"/>
<stop offset="0.440625" stop-color="#815FA3"/>
<stop offset="0.89375" stop-color="#FF05AA"/>
</linearGradient>
</defs>
</svg>

Answer 1

您在 svg fill上缺少一个关闭" ，您的isolation道具未应用：

fill="none style={{ isolation: 'isolate' }}"

应该

fill="none" style={{ isolation: 'isolate' }}"