深入浅析HTML5中的SVG

更新时间:2023-04-06 14:05:42 阅读：评论：0

svg 背景

svg是scalable vector graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过xml来表现矢量图形的技术——svg！由于svg也是一种xml文件，所以svg也继承了xml的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持svg，大家可以从这里得到更多的兼容信息，其中包括：

使用<embed>或者<object>元素来显示基本的svg图形；
使用<img>来显示svg图形；
将svg图形应用为css背景图；
直接在html文档中使用<svg>标签（需要html5支持）；
对使用css或者外部对象元素的html元素使用svg变换、滤镜等特效；
对svg对象使用类似photoshop的效果，包括模糊和色彩处理；
对svg图像使用动画；
使用svg格式的字体；

* 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>元素中
* 绘制图形
* 矩形元素

复制代码代码如下:

<rect x=”” y=”” width=”” height=”” />

<!doctype html>

<html>

<head>

<title>svg绘制矩形</title>

<meta chart=”utf-8″ />

</head>

<body>

<!–

在html页面中使用svg标手机令牌怎么解绑签的话

* 定义<svg></svg>元素

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

* 默认大小 300px * 150px

* 设置宽度和高度 – 属性和style

* 利用svg绘制所有图形,必须定义失恋33天电影在<svg>元素内

* 利用svg绘制的图形是与html页面有关的

–>

<svg style=”background:pink;width:400px;height:400px;”>

<!–

绘制矩形 – <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″ style=”fill:blue;stroke:black;stroke-width:5″ />

</svg>

</body>

</html>

* 圆形元素

<circle cx=”” cy东北石油大学图书馆=”” r=”” />

<body>

<svg width=”500px” height=”500px”>

<!–

绘制圆形 – <circle>

* cx和cy – 圆形的圆形坐标值

* r – 圆形的半径

–>

<circle cx=”100″ cy=”100″ r=”100″ fill=”pink” />

</svg>

</body>

* 椭圆元素

<ellip cx=”” cy=”” rx=”” ry=””>

<body>

<svg width=”300px” height=”300px”>

<ellip cx=”150″ cy=”150″ rx=”150″ ry=”100″ />

</svg>

</body>

* 直线元素

<line x1=”” y1=”” x2=”” y2=”” />

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

* 折线元素

<polyline points=””>

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

* 多边形元素

<polygon points=”” />

<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 x1=”%” y1=”%” x2=”%” y2=”%”>

<stop offt=”%” stop-color=”color” />

</lineargradient>

<body>

<svg width=”400px” height=”400px”>

<!–

设置线型渐变 – <lineargradient>

* 用法 – 将渐变定义在<defs>元素中

* 特点 – 具有基准线

* 起点坐标值 – x1和y1

* 终点坐标值 – x2和y2

* 注意

* 该元素是起始元素

<lineargradient></lineargradient>

* x1和y1、x2和y2的值都是百分值

* 定义id属性

* 用于将设置的渐变添加到绘制的图形元素中

* 使用<stop>元素 – 设置渐变的颜色

* offt – 设置渐变颜色的位置

* 该值也是百分值

* stop-color – 设置渐变颜色

* stop-opacity – 设置渐变颜色的透明度

–>

<defs>

<lineargradient id=”mygrd” x1=”0″ y1=”0″ x2=”100%” y2=”100%”>

<stop offt=”0″ stop-color=”red” />

<stop offt=”50%” stop-color=”green” />

<stop offt=”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 id=”myfilter”>

<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() – 绘制圆形
* makeellip() – 绘制椭圆
* 动画方法
* update() – 更新动画
* play() – 添加动画(循环)
* pau() – 删除动画
* 设置绘制图形的样式
* 调用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库