SVG漸變效果漸變標(biāo)簽<linearGradient>標(biāo)簽用來定義水平漸變<radialGradient>用來定義放射性漸變。<linearGradient>標(biāo)簽的X1，X2，Y1，Y2屬性定義漸變開始和結(jié)束位置漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個<stop>標(biāo)簽來規(guī)定。offset屬性用來定義漸變的開始和結(jié)束位置。當(dāng)y1和y2相等，而x1和x2不同時，可創(chuàng)建水平漸變當(dāng)x1和x2相等，而y1和y2不同時，可創(chuàng)建垂直漸變當(dāng)x1和x2不同，且y1和y2不同時，可創(chuàng)建角形漸變SVG漸變效果線形水平漸變<svgheight="500"width="500"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/></svg>瀏覽器查看效果:SVG漸變效果線形垂直漸變<svgheight="500"width="500"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="0%"y2="100%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/></svg>瀏覽器查看效果:SVG漸變效果漸變添加文本<svgheight="500"width="500"><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/><stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/></linearGradient></defs><ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/><textfill="#ffffff"font-size="45"font-family="Verdana"x="150"

y="86">SVG</text></svg>瀏覽器查看效果:SVG漸變效果SVG漸變效果放射性漸變<svgwidth="500px"height="500"><defs><radialGradientid="grey_blue"cx="50%"cy="50%"r="50%"fx="50%"

fy="50%"><stopoffset="0%"style="stop-color:rgb(200,200,200);stop-opacity:0"/><stopoffset="100%"style="stop-color:rgb(0,0,255);stop-opacity:1"/></radialGradient></defs><ellipsecx="230"cy="200"rx="110"ry="100"style="fill:url(#grey_blue)"/></svg>瀏覽器查看效果:SVG漸變效果放射性漸變<svgwidth="500"height="500"><defs><radialGradientid="grey_blue"cx="20%"cy="40%"r="50%"fx="50%"

fy="50%"><stopoffset="0%"style="stop-color:rgb(200,200,200);stopopacity:0"/><stopoffset="100%"style="stop-color:rgb(0,0,255);stop-opacity:1"/></radialGradient>