工作日记20151211

1.svg基础

canvas与svg的区别

canvas元素

为HTML页面提供一个画布功能

将所有绘制的图形绘制在画布中

绘制的图形与HTML页面是无关的

svg元素

为HTML页面提供一个区域,绘制SVG图形

SVG绘制的图形使用是HTML元素形式

绘制的SVG图形与HTML页面是有关的

设置渐变 - 类似于Canvas对渐变的操作

* 渐变元素必须定义在<defs>元素中
-->
<defs>
<!--
设置线性渐变 - 基准线
* 绘制基准线的方式
* 起点坐标值(x1,y1)
* 终点坐标值(x2,y2)
* x1,y1,x2,y2的值都是为百分值
-->
<linearGradient id="grad" x1="0" y1="0" x2="100%" y2="100%">
<!--
<stop>元素
* 作用 - 设置渐变颜色
* 属性
* offset - 位置(百分值)
* stop-color - 颜色
-->
<stop offset="0" stop-color="red" />
<stop offset="50%" stop-color="yellow" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<!--
将设置的渐变与绘制的图形相关联
* 为<linearGradient>元素定义id属性值
* 在绘制的元素中使用fill:url(#id)
-->
<rect x="0" y="0" width="400" height="400" style="fill:url(#grad)" />

设置高斯模糊

<!--
高斯模糊效果
* 定义<defs>元素,在该元素中定义<filter>元素
* 定义<filter>元素 - 滤镜元素
* 定义高斯模糊效果 - <feGaussianBlur>
-->
<!-- 设置滤镜效果 -->
<defs>
<!-- 定义滤镜 -->
<filter id="myfilter">
<!--
定义高斯模糊
* stdDeviation属性 - 定义模糊程度
* in="SourceGraphic" - 定义整个效果
-->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<!--
将设置滤镜与绘制图形相关联
* 为<filter>元素定义id属性值
* 在绘制元素中使用filter:url(#id)
-->
<rect x="100" y="100" width="200" height="200" style="filter:url(#myfilter)" />