工作日记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)" />