html5-svg标签使用基础二

1.html5-svg 标签滤镜

<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）

filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符

滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜

<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度

in="SourceGraphic" 这个部分定义了由整个图像创建效果

<svg width="100%" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="Gaussian_Blur">

<feGaussianBlur in="SourceGraphic" stdDeviation="3" />

</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 width="100%" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>

<filter id="Gaussian_Blur1">

<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_Blur1)"/>

</svg>



2.html5-svg 标签渐变

当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变

当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变

当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<svg width="100%" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<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="100%" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<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>



3.html5-svg 标签渐变

cx、cy 和 r 属性定义外圈，

而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。

每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

<svg width="100%" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<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>



<svg width="100%" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<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>