SVG - 渐变_SVG 菜鸟教程

渐变是指形状中一种颜色与另一种颜色的平滑过渡。SVG 提供两种类型的渐变。

线性渐变 − 表示一种颜色从一个方向到另一个方向的线性过渡。
径向渐变 − 表示一种颜色与另一种颜色从一个方向到另一个方向的圆形过渡。

线性渐变

语法声明

以下是 <linearGradient> 元素的语法声明。我们只展示了主要属性。

<linearGradient
	 	gradientUnits ="units to define co-ordinate system of contents of gradient"
	 	gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
	 	
	 	x1="x-axis co-ordinate"	
	 	y1="y-axis co-ordinate" 	 		
	 	x2="x-axis co-ordinate"	
	 	y2="y-axis co-ordinate" 	 		
	 	
	 	spreadMethod="indicates method of spreading the gradient within graphics element"
	 	xlink:href="reference to another gradient" >
</linearGradient>

属性

名称	描述
gradientUnits	定义渐变中各种长度值的坐标系的单位。如果 gradientUnits=“userSpaceOnUse”，则值表示在使用 gradient 元素时当前用户坐标系中的值。如果 patternContentUnits=“objectBoundingBox”，则值表示在使用渐变元素时引用元素上边界框的分数或百分比值。默认值为 userSpaceOnUse。
x1	梯度向量的 x 轴坐标。Defeault 为 0。
y1	梯度向量的 y 轴坐标。默认值为 0。
x2	梯度向量的 x 轴坐标。Defeault 为 0。
y2	梯度向量的 y 轴坐标。默认值为 0。
spreadMethod	表示在 Graphics 元素中展开渐变的方法。默认为 'pad'。
xlink:href	用于引用另一个渐变。

例

testSVG.htm

<html>
	 	<title>SVG Linear Gradient</title>
	 	<body>
	 	
	 	 	 <svg width="600" height="100">
	 	 		
	 	 	 	 	<defs>
	 	 	 	 	 	 <linearGradient id="sampleGradient">
	 	 	 	 	 	 	 	<stop offset="0%" stop-color="#FF0000" />
	 	 	 	 	 	 	 	<stop offset="100%" stop-color="#00FFF00" />
	 	 	 	 	 	 </linearGradient>
	 	 	 	 	</defs>
	 	 	 	 	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="50" >使用线性渐变：</text>
	 	 	 	 	 	 <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"	
	 	 	 	 	 	 fill="url(#sampleGradient)" />
	 	 	 	 	</g>
	 	 	 	 	
	 	 	 </svg>
	 	
	 	</body>
</html>

一个 <linearGradient> 元素定义为 sampleGradient。
在 linearGradient 中，两个偏移量用两种颜色定义。
在 rect 元素的 fill 属性中，指定渐变的 url 以使用之前创建的渐变填充矩形。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

径向渐变

语法声明

以下是 <radialGradient> 元素的语法声明。我们只展示了主要属性。

<radialGradient
	 	gradientUnits ="units to define co-ordinate system of contents of gradient"
	 	gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
	 	
	 	cx="x-axis co-ordinate of center of circle."	
	 	cy="y-axis co-ordinate of center of circle." 	 		
	 	
	 	r="radius of circle"	
	 	
	 	fx="focal point for the radial gradient" 	 		
	 	fy="focal point for the radial gradient" 	 		
	 	
	 	spreadMethod="indicates method of spreading the gradient within graphics element"
	 	xlink:href="reference to another gradient" >
</radialGradient>

属性

名称	描述
gradientUnits	定义渐变中各种长度值的坐标系的单位。如果 gradientUnits=“userSpaceOnUse”，则值表示在使用 gradient 元素时当前用户坐标系中的值。如果 patternContentUnits=“objectBoundingBox”，则值表示在使用渐变元素时引用元素上边界框的分数或百分比值。默认值为 userSpaceOnUse。
cx	梯度向量最大圆心的 x 轴坐标。Defeault 为 0。
cy	梯度向量最大圆心的 y 轴坐标。默认值为 0。
r	梯度向量最大圆心的半径。Defeault 为 0。
fx	径向渐变的焦点。默认值为 0。
fy	径向渐变的焦点。默认值为 0。
spreadMethod	表示在 Graphics 元素中展开渐变的方法。默认为 'pad'。
xlink:href	用于引用另一个渐变。

例

testSVG.htm

<html>
	 	<title>SVG Radial Gradient</title>
	 	<body>
	 	 		
	 	 	 <h1>Sample SVG Radial Gradient</h1>
	 	 		
	 	 	 <svg width="600" height="300">
	 	 	 	 	<defs>
	 	 	 	 	 	 <radialGradient id="sampleGradient">
	 	 	 	 	 	 	 	<stop offset="0%" stop-color="#FF0000" />
	 	 	 	 	 	 	 	<stop offset="100%" stop-color="#00FFF00" />
	 	 	 	 	 	 </radialGradient>
	 	 	 	 	</defs>
	 	 	 	 	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="50" >使用径向渐变： </text>
	 	 	 	 	 	 <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
	 	 	 	 	 	 fill="url(#sampleGradient)" />
	 	 	 	 	</g>
	 	 	 </svg>
	 	 		
	 	</body>
</html>

一个 <radialGradient> 元素定义为 sampleGradient。
在 radialGradient 中，两个偏移量用两种颜色定义。
在 rect 元素的 fill 属性中，指定渐变的 url 以使用之前创建的渐变填充矩形。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

<< SVG - 图案 SVG - 交互性 >>