2023学年完整公开课版SVG渐变效果

SVG渐变效果渐变标签<linearGradient>标签用来定义水平渐变<radialGradient>用来定义放射性渐变。<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。当y1和y2相等，而x1和x2不同时，可创建水平渐变当x1和x2相等，而y1和y2不同时，可创建垂直渐变当x1和x2不同，且y1和y2不同时，可创建角形渐变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>