HTML5中的SVG

2024-05-17 02:34•html•阅读 3768

* SVG

* 基本内容

* SVG并不属于HTML5专有内容

* HTML5提供有关SVG原生的内容

* 在HTML5出现之前,就有SVG内容

* SVG,简单来说就是矢量图

* SVG文件的扩展名为".svg"

* SVG使用的是XML语法

* 概念

* SVG是一种使用XML技术描述二维图形的语言

* SVG的特点

* SVG绘制图形可以被搜索引擎抓取

* SVG在图片质量不下降的情况下,被放大

* SVG与Canvas的区别

* SVG

* 不依赖分辨率

* 支持事件绑定

* 大型渲染区域的程序(例如百度地图)

* 不能用来实现网页游戏

* Canvas

* 依赖分辨率

* 不支持事件绑定

* 最合适网页游戏

* 保存为".jpg"格式的图片

* 用途

* 网页中一些小的图标

* 网页中动态特效(动画效果)

* HTML5中使用SVG

* 使用<svg></svg>元素

* 作用 - 类似于<canvas>元素

* 默认大小为300px*150px

* 使用CSS样式

* 使用SVG绘制图形,必须定义<svg>元素中

* 绘制图形

* 矩形元素

<!DOCTYPE html>
<html>
 <head>
  <title>SVG绘制矩形</title>
  <meta charset="utf-8" />
 </head>

 <body>
  <!--
    在HTML页面中使用svg标签的话
    * 定义<svg></svg>元素
      * 类似于<canvas>元素的作用
      * 默认大小 300px * 150px
      * 设置宽度和高度 - 属性和style
    * 利用svg绘制所有图形,必须定义在<svg>元素内
      * 利用svg绘制的图形是与HTML页面有关的
  -->
  <svg >
    <!--
        绘制矩形 - <rect />
        * x和y - 绘制矩形的左上角坐标值
        * width和height - 绘制矩形的宽度和高度
          * 必须使用属性方式,不能使用style样式方式
        * 默认颜色为黑色
        设置颜色 - 既可以使用属性,还可以使用样式
        * fill - 设置填充颜色
        * stroke - 设置描边颜色
        设置线条宽度
        * stroke-width
        注意
        * svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性
    -->
    <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" />

    <rect x="120" y="10" width="100" height="100"  />
  </svg>
 </body>
</html>

* 圆形元素

 <body>
  <svg width="500px" height="500px">
    <!--
        绘制圆形 - <circle>
        * cx和cy - 圆形的圆形坐标值
        * r - 圆形的半径
    -->
    <circle cx="100" cy="100" r="100" fill="pink" />
  </svg>
 </body>

* 椭圆元素

 <body>
  <svg width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="150" ry="100" />
  </svg>
 </body>

* 直线元素

 <body>
  <!--
    <svg>元素中只能包含一个图形元素,还是可以包含多个图形元素?
    * 可以包含多个图形元素
  -->
  <svg width="300px" height="300px">
    <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/>
    <line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/>
  </svg>
 </body>

* 折线元素

<body>
  <svg width="500px" height="500px">
    <!--
        <polyline>元素 - 折线
        * points - 设置起点、折点及终点
          * x和y之间使用","分隔
          * 多个点之间使用空格分隔
        折线的特点
        * 默认将折线中的区域(起点到终点),默认提供黑色
    -->
    <polyline points="10,10 200,10 200,200 10,200 10,10" stroke-width="5" stroke="black" fill="white"/>
  </svg>
 </body>

* 多边形元素

 <body>
  <svg width="500px" height="500px">
    <polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/>
  </svg>
 </body>

* 特效元素

* 渐变 - 渐变元素定义在<defs>元素内

* 线型渐变 - <linearGradient>

* 该元素是起始元素

</linearGradient>

 <body>
  <svg width="400px" height="400px">
    <!--
        设置线型渐变 - <linearGradient>
        * 用法 - 将渐变定义在<defs>元素中
        * 特点 - 具有基准线
          * 起点坐标值 - x1和y1
          * 终点坐标值 - x2和y2
        * 注意
          * 该元素是起始元素
            <linearGradient></linearGradient>
          * x1和y1、x2和y2的值都是百分值
        * 定义id属性
          * 用于将设置的渐变添加到绘制的图形元素中
        * 使用<stop>元素 - 设置渐变的颜色
          * offset - 设置渐变颜色的位置
            * 该值也是百分值
          * stop-color - 设置渐变颜色
          * stop-opacity - 设置渐变颜色的透明度
    -->
    <defs>
        <linearGradient  x1="0" y1="0" x2="100%" y2="100%">
            <stop offset="0" stop-color="red" />
            <stop offset="50%" stop-color="green" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>
    <!--
        如何可以将上面设置线型渐变,添加在下面的矩形中?
        * 使用fill属性,值为url(#渐变元素的id值)
    -->
    <rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
  </svg>
 </body>

* 扇形(射线)渐变 - <radialGradient>

* 滤镜 - 高斯模糊

* 滤镜使用<filter>元素

* <feGaussianBlur>元素 - 高斯模糊

* in="SourceGraphic"

* stdDeviation - 设置模糊程度

 <body>
  <svg width="500px" height="500px">
    <!--
        如何设置高斯模糊滤镜
        * 定义<defs></defs>元素 - 滤镜定义在该元素中
        * 定义<filter></filter>元素 - 表示SVG的滤镜
          * 定义高斯模糊元素<feGaussianBlur>
          * 属性
            * in="SourceGraphic" - 固定写法
            * stdDeviation - 设置模糊程度
        * 为<filter>元素定义id属性值
          * 方便添加在绘制图形的元素中
    -->
    <defs>
        <filter >
            <feGaussianBlur in="SourceGraphic" stdDeviation=5 />
        </filter>
    </defs>
    <!--
        如何将上面的高斯模糊与下面的元素进行关联
        * 使用filter属性,值为url(#id)
          * 设置当前图形的滤镜
    -->
    <rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" />
  </svg>
 </body>

* 注意 - 定义在<defs>元素中

* TWO.js

* 基本内容

* JS库介绍

* three.js - 专门用于绘制三维图形

* two.js - 专门用于绘制二维图形

* two.js支持的格式

* SVG - 默认

* Canvas

* WebGL - 专门用于绘制图像

* 如何使用two.js

* 在HTML页面中引入two.js文件

* 在HTML页面中定义容器(<div>)

* 在javascript代码中

* 获取HTML页面中的容器

* 创建Two对象,将该对象添加到容器中

new Two(params).appendTo(Element);

* 使用two.js提供的API方法进行绘制

* 利用two.js提供的方法,设置图形

* 利用update()方法进行绘制

* 创建Two对象

* 构造器 - new Two(params)

* params参数 - 设置当前对象的信息

* type - 设置当前使用的格式(Two.Types.svg)

* svg - 默认值

* canvas

* webgl

* width和height - 设置宽度和高度

* fullscreen - 设置是否全屏

* Boolean值,true表示全屏

* 图形方法

* makeLine() - 绘制线条

* makeRectangle() - 绘制矩形

* makeCircle() - 绘制圆形

* makeEllipse() - 绘制椭圆

* 动画方法

* update() - 更新动画

* play() - 添加动画(循环)

* pause() - 删除动画

* 设置绘制图形的样式

* 调用Two对象的绘制方法绘制图形时,返回该图形对象

* 通过该图形对象,设置相关属性值

* 分组操作

* Two.Group

* 动画效果

* bind(event,callback)方法 - 事件绑定

* event - 绑定事件名称

* update - 对应update()方法的作用

* 所有的DOM事件都可以绑定

* callback - 事件处理函数

* 扩展内容

* 前端开发工具

* Aptana Studio 3 - 代码提示

* Webstrom - 国内前端开发人员神器

* 实际开发中

* 多用SVG

* 不失真

* 可被搜索

* 页面优化 - 减少外部链接

* <a href="">

* <img src="">

* Canvas - HTML绘制图形

* 实际运行中,是以图片方式出现(.png)

* 不能被搜索引擎抓取

* 放大后失真

* SVG内容

* 内容量非常大

* 静态绘制图形

* 动态动画效果

* 专门提供事件

* 网上关于SVG的资料很少(没有书籍)

* SVG的规范(W3C英文)

* SVG或CANVAS在HTML页面中定义

* 是只能定义一个元素,还是可以定义多个元素?

* 在一个HTML页面可以定义多个<svg>或<canvas>元素

* SVG还是CANVAS都是允许同时定义(绘制)多个图形

* 在实际开发中的使用

* SVG在将来的工作开发,使用率并不高

* SVG图片一般都是由UI设计师来完成

* SVG即使是我们自己来设计(绘制)

* 目前网络上很多专门提供现成的SVG图片的网站

* 使用JS库

上一篇 »HTML5 canvas开发详解，第2版
下一篇 »HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

HTML5中的SVG

相关推荐

初学HTML5的一点理解

环形进度条的实现方法总结和动态时钟绘制，CSS3、SVG、Canvas

HTML5中的Web Storage，sessionStorage||localStorage理解与简单实例

详解HTML5中的进度条progress元素简介及兼容性处理

html5 css3新特性了解一下

html5 css选择器 井号, 句点的区别

用javascript控制svg的图片颜色

Java HTML to PDF 支持SVG

html5 css选择器井号, 句点的区别