SVG渐变
SVG 线性渐变 - <linearGradient>
<linearGradient>标签必须嵌套在
线性渐变可以定义为水平,垂直或角渐变:
- 当y1和y2相等,而x1和x2不同时,可创建水平渐变
- 当x1和x2相等,而y1和y2不同时,可创建垂直渐变
- 当x1和x2不同,且y1和y2不同时,可创建角形渐变
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y1="0%">
<stop offset="0%" style="stop-color: red;stop-opacity: 1" />
<stop offset="15%" style="stop-color: orange;stop-opacity: 1" />
<stop offset="25%" style="stop-color: yellow; stop-opacity: 1" />
<stop offset="50%" style="stop-color: greenyellow; stop-opacity: 1" />
<stop offset="75%" style="stop-color: skyblue;stop-opacity: 1" />
<stop offset="100%" style="stop-color: mediumpurple;stop-opacity: 1" />
</linearGradient>
</defs>
<ellipse rx="100" ry="50" cx="100" cy="50" fill="url(#grad1)"/>
</svg>
- <linearGradient>标签的id属性可为渐变定义一个唯一的名称
- <linearGradient>标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
标签来规定。offset属性用来定义渐变的开始和结束位置。 - 填充属性把 ellipse 元素链接到此渐变
渐变加阴影
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color: red;stop-opacity: 1;" />
<stop offset="20%" style="stop-color: orange;stop-opacity: 1;" />
<stop offset="25%" style="stop-color: yellow;stop-opacity: 1;" />
<stop offset="50%" style="stop-color: greenyellow;stop-opacity: 1;" />
<stop offset="75%" style="stop-color: deepskyblue;stop-opacity: 1;" />
<stop offset="100%" style="stop-color: purple;stop-color: 1;" />
</linearGradient>
</defs>
<defs>
<filter id="f1" x="0" y="0">
<feOffset in="SourceGraphic" dx="20" dy="20" result="offOut" />
<feColorMatrix type="matrix" in="offOut" result="matrixOut"
values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
<feGaussianBlur in="matrixOut" result="gauOut" stdDeviation="6" />
<feBlend in="SourceGraphic" in2="gauOut" mode="normal" />
</filter>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#grad2)" filter="url(#f1)"/>
</svg>
加上文字
<svg>
<defs>
<linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: red;stop-opacity:1;" />
<stop offset="50%" style="stop-color: orange;stop-opacity: 1;" />
<stop offset="100%" style="stop-color: yellow;stop-opacity: 1;" />
</linearGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#lg1)"/>
<text x="30" y="60" fill="#fff" font-size="45" font-family="Verdana">渐变色</text>
</svg>
- <text> 元素是用来添加一个文本
SVG 放射性渐变 - <radialGradient>
- <radialGradient>元素用于定义放射性渐变。
- <radialGradient>标签必须嵌套在
的内部。 标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。
<svg>
<defs>
<radialGradient id="rg" cx="50%" cy="50%" fx="50%" fy="50%" r="50%">
<stop offset="0%" style="stop-color: rgb(255,255,255);stop-opacity: 0;" />
<stop offset="50%" style="stop-color: yellow;stop-opacity: 0;" />
<stop offset="75%" style="stop-color: greenyellow;stop-opacity:1;" />
<stop offset="100%" style="stop-color: blue;stop-opacity: 1;" />
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#rg)" />
</svg>
- <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
- CX,CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
- 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个
标签指定。offset属性用来定义渐变色开始和结束 - 填充属性把ellipse元素链接到此渐变
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>