平武建站

javascript中svg有什么用

这篇文章给大家分享的是有关javascript中svg有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

建网站原本是网站策划师、网络程序员、网页设计师等，应用各种网络程序开发技术和网页设计技术配合操作的协同工作。成都创新互联专业提供成都网站建设、网站设计,网页设计,网站制作(企业站、成都响应式网站建设公司、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!

在JavaScript中，svg是指可伸缩矢量图形，是基于XML用于描述二维矢量图形的一种图形格式，“svg.js”是一个轻量级的JavaScript库，可以操作svg和定义动画。

本教程操作环境：windows10系统、javascript1.8.5版、Dell G3电脑。

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

简介：

SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。

SVG（Scalable Vector Graphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。

SVG.js中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。

•易读的简洁的语法

•非常轻量，gzip压缩版只有5k

•针对大小、位置、颜色等的动画元素

•模块化结构，轻松扩展

•各种实用插件

•各种形状类型间拥有统一的API.

•元素可以绑定事件，包括触摸事件

•完全支持不透明蒙版

•元素组

•动态渐变

•填充模式

•完整的文档记录

创建一个SVG文档

使用SVG()函数来在一个给定的html元素中创建一个SVG文档：

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

其中SVG()中的参数可以使一个元素的id或者元素本身。

以上两句将在html文档中产生以下代码：

当然，要定义SVG画布的大小，除了使用像素之外，也可以使用百分比的。如下：

var draw = SVG('canvas').size('100%', '100%')

检测浏览器对SVG的支持度

在使用svg.js之前，可以先用以下的代码来检测浏览器对svg.js这个库的支持情况：

if (SVG.supported) { 
var draw = SVG('canvas') 
var rect = draw.rect(100,100) } 
else { 
alert('SVG not supported') }

ViewBox

的属性可以用viewbox()方法来确定，viewbox()方法就像是一个setter函数一样，如下所示：

draw.viewbox(0,0,297,210)

上面的一行代码和下面的一行代码是等价的，前两个参数表示的位置，后两个是其宽度和高度。

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

如果没有任何参数，那么viewbox就直接返回一个空的：

var box = draw.viewbox()

viewbox() 方法可以有zoom属性，

var box = draw.viewbox() var zoom = box.zoom

如果viewbox中的的大小和实际的SVG画布的大小相同，那么zoom的值就是1.

SVG 文档

svg.js也可以在htmlDOM外工作，如下所示，是一个独立的svg文件，就像是外部的js文件一样。

 
 

 
 
 
 

感谢各位的阅读！关于“javascript中svg有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


网站题目：javascript中svg有什么用
URL标题：http://pwwzsj.com/article/pdhhei.html

其他资讯