SVG简介2

SVG简介2

文献种类：专题技术文献；

开发工具与关键技术：VS/JavaScript
撰写时间：2019年5月8日

SVG 高斯模糊（Gaussian Blur）：必须在 <defs> 标签中定义 SVG 滤镜。

<filter>标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
<filter>标签必须嵌套在<defs>标签内。
<defs>标签是definitions的缩写，它允许对诸如滤镜等特殊元素进行定义。

例：模糊椭圆
<svg width="300" height="200" version="1.1" xmlns=" ">
	<defs>
		<filterid="Gaussian_Blur">
			<feGaussianBlurin="SourceGraphic"stdDeviation="3"/>
			</filter>
	</defs>
	<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#e3e3e3; stroke:#000000;
		stroke-width:2; filter:url(#Gaussian_Blur)"/>
</svg>

解释：<filter>标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）；
	  filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符；
	  滤镜效果是通过 <feGaussianBlur>标签进行定义的。fe 后缀可用于所有的滤镜；
	  <feGaussianBlur>标签的 stdDeviation 属性可定义模糊的程度；
	  in="SourceGraphic" 这个部分定义了由整个图像创建效果；

例：另一个不同的stdDeviation 值
<svg width="300" height="300" version="1.1" xmlns=" ">
	<defs>
		<filterid="Gaussian_Blur">
			<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
		</filter>
	</defs>
	<ellipse cx="200" cy="150" rx="70"ry="40" style="fill:#ff0000; stroke:#000000;
		stroke-width:2; filter:url(#Gaussian_Blur)"/>
</svg>

SVG 线性渐变：必须在<defs> 标签中进行定义。

SVG 渐变：
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
在 SVG 中，有两种主要的渐变类型： 1、线性渐变 ； 2、放射性渐变 ；

线性渐变：
	<linearGradient> 可用来定义 SVG 的线性渐变。
	<linearGradient> 标签必须嵌套在 <defs> 的内部。
	<defs> 标签是 definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
	线性渐变可被定义为水平、垂直或角形的渐变：
	当 y1和 y2相等，而 x1和 x2不同时，可创建水平渐变 ；
	当 x1和 x2相等，而 y1和 y2不同时，可创建垂直渐变 ；
	当 x1和 x2不同，且 y1和 y2不同时，可创建角形渐变 ；

例：水平渐变
<svg width="300" height="300" version="1.1" xmlns=" ">
	<defs>
		<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
			<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
		</linearGradient>
	</defs>
	<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>

例：垂直渐变
<svg width="300px" height="300px" version="1.1">
	<defs>
		<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
			<stop offset="50%" style="stop-color:rgb(112,94,94); stop-opacity:1"/>
			<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
		</linearGradient>
	</defs>
	<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>

例：
<svg width="300" height="300" version="1.1" xmlns=" ">
	<defs>
		<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
			<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
		</linearGradient>
	</defs>
	<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>

SVG 放射性渐变：必须在 <defs> 标签中进行定义。

放射性渐变:
	<radialGradient> 用来定义放射性渐变。 <radialGradient> 标签必须嵌套在 <defs> 中。
	<defs> 标签是 definitions的缩写，它允许对诸如渐变等特殊元素进行定义。

例：由内而外放射渐变的圆
<svg width="350" height="300" version="1.1" xmlns=" ">
	<defs>
		<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
			<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
			<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
		</radialGradient>
	</defs>
	<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>
解释：
	<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，
	fill:url(#grey_blue)属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，
	而 fx和fy定义内圈渐变的颜色范围可由两种或多种颜色组成。
	每种颜色通过一个 <stop> 标签来规定。
	offset属性用来定义渐变的开始和结束位置。

另一个例子：
<svg width="350" height="300" version="1.1" xmlns=" ">
	<defs>
		<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
			<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
			<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
		</radialGradient>
	</defs>
	<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>


借鉴于老师上课文档与W3Cchool