当前位置：首页 > 资讯 > 技术文档

Svg.js实例教程及使用手册详解（一）

时间：2020-03-27 01:34 编辑：来源：阅读：
扫一扫，手机访问

摘要：Svg.js实例教程及使用手册详解（一）

[b]什么是SVG？[/b] SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 [b]简介：[/b] SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。 SVG（Scalable Vector Graphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。 SVG.js中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。 SVG.js中的一些亮点： •易读的简洁的语法 •非常轻量，gzip压缩版只有5k •针对大小、位置、颜色等的动画元素 •模块化结构，轻松扩展 •各种实用插件 •各种形状类型间拥有统一的API. •元素可以绑定事件，包括触摸事件 •完全支持不透明蒙版 •元素组 •动态渐变 •填充模式 •完整的文档记录 [b]使用说明：[/b] [b]创建一个SVG文档[/b] 使用SVG()函数来在一个给定的html元素中创建一个SVG文档：

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

其中SVG()中的参数可以使一个元素的id或者元素本身。以上两句将在html文档中产生以下代码：

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

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

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

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

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

[b]ViewBox[/b] <svg>的属性可以用viewbox()方法来确定，viewbox()方法就像是一个setter函数一样，如下所示：

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

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

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

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

var box = draw.viewbox()

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

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

如果viewbox中的<svg>的大小和实际的SVG画布的大小相同，那么zoom的值就是1. [b]SVG 文档[/b] svg.js也可以在htmlDOM外工作，如下所示，是一个独立的svg文件，就像是外部的js文件一样。

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG('viewport') 
draw.rect(100,100).animate().fill('#f03').move(100,100) 
]]> 
</script> 
</svg>

以上所述是小编给大家介绍的Svg.js实例教程及使用手册详解（一）的内容，下面将持续更新svg.js的其他方法的用法，敬请关注！

全部评论(0)

上一篇：javascript结合CSS实现苹果开关按钮特效
下一篇：浅析Bootstrap组件之面板组件

资讯排行榜
更多>>