SVG 渐变填充

SVG 支持线性渐变和径向渐变，可以创建丰富的视觉效果。

线性渐变 (linearGradient)

                <linearGradient id="linear1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%"
                  stop-color="#10b981"/> <stop offset="100%" stop-color="#3b82f6"/>
                  </linearGradient>
              

径向渐变 (radialGradient)

                <radialGradient id="radial1"> <stop offset="0%" stop-color="#fbbf24"/> <stop
                  offset="100%" stop-color="#f59e0b" stop-opacity="0.3"/> </radialGradient>
              

多色渐变

                <linearGradient id="multi1"> <stop offset="0%" stop-color="#ef4444"/> <stop
                  offset="33%" stop-color="#f59e0b"/> <stop offset="66%" stop-color="#10b981"/> <stop
                  offset="100%" stop-color="#3b82f6"/> </linearGradient>
              

对角渐变

                <linearGradient id="diagonal1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%"
                  stop-color="#8b5cf6"/> <stop offset="100%" stop-color="#ec4899"/>
                  </linearGradient>
              

🎮 交互式线性渐变编辑器

方向 (x2): 100%

方向 (y2): 50%

起始颜色: 透明度: 100%

结束颜色: 透明度: 100%

              <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"> <stop offset="0%"
                stop-color="#10b981" stop-opacity="1"/> <stop offset="100%" stop-color="#3b82f6"
                stop-opacity="1"/> </linearGradient>
            

🎮 交互式径向渐变编辑器

中心 X: 50%

中心 Y: 50%

半径: 50%

内部颜色:

外部颜色:

              <radialGradient id="gradient" cx="50%" cy="50%" r="50%"> <stop offset="0%"
                stop-color="#fbbf24" stop-opacity="1"/> <stop offset="100%" stop-color="#f59e0b"
                stop-opacity="0.3"/> </radialGradient>
            