1.svg 文字渐变
<!-- 横向渐变(x1,y1,x2,y2控制渐变方向) --> <svg> <defs> <linearGradient id="grad_red_blue_lr" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:red; stop-opacity:1" /> <stop offset="100%" style="stop-color:blue; stop-opacity:1" /> </linearGradient> </defs> <text x="0" y="36" fill="url(#grad_red_blue_lr)" style="font-size:36px"> 渐变文字{x1: "0%",y1: "0%", x2: "100%", y2: "0%"} </text> </svg> <!-- 纵向渐变(x1,y1,x2,y2控制渐变方向) --> <svg> <defs> <linearGradient id="grad_red_blue_tb" x1="0%" y1="100%" x2="0%" y2="0%"> <stop offset="0%" style="stop-color:red; stop-opacity:1" /> <stop offset="100%" style="stop-color:blue; stop-opacity:1" /> </linearGradient> </defs> <text x="0" y="36" fill="url(#grad_red_blue_tb)" style="font-size:36px"> 渐变文字{x1: "0%",y1: "100%", x2: "0%", y2: "0%"} </text> </svg> <!-- 横向渐变(gradientTransform: rotate) --> <svg> <defs> <linearGradient id="grad_red_yellow_lr" gradientTransform="rotate(0)"> <stop offset="0%" style="stop-color:red; stop-opacity:1" /> <stop offset="100%" style="stop-color:yellow; stop-opacity:1" /> </linearGradient> </defs> <text x="0" y="36" fill="url(#grad_red_yellow_lr)" style="font-size:36px"> 渐变文字{gradientTransform: "rotate(0)"} </text> </svg> <!-- 纵向渐变(gradientTransform: rotate)--> <svg> <defs> <linearGradient id="grad_red_yellow_tb" gradientTransform="rotate(90)"> <stop offset="0%" style="stop-color:red; stop-opacity:1" /> <stop offset="100%" style="stop-color:yellow; stop-opacity:1" /> </linearGradient> </defs> <text x="0" y="36" fill="url(#grad_red_yellow_tb)" style="font-size:36px"> 渐变文字{gradientTransform: "rotate(90)"} </text> </svg>
渐变文字{x1: "0%",y1: "0%", x2: "100%", y2: "0%"}
渐变文字{x1: "0%",y1: "100%", x2: "0%", y2: "0%"}
渐变文字{gradientTransform: "rotate(0)"}
渐变文字{gradientTransform: "rotate(90)"}