SVG.js入门指南：核心概念、特性与基础用法详解

SVG基础与标准概述

SVG是什么？

SVG全称为Scalable Vector Graphics，即可伸缩矢量图形。

SVG主要用于定义网络环境中基于矢量的图形内容。

SVG图形采用XML格式进行定义与存储。

在放大或调整尺寸时，SVG图像的质量保持恒定，不会出现失真。

SVG是万维网联盟（W3C）制定的标准。

SVG与DOM、XSL等W3C标准共同构成完整的技术体系。

SVG.js库特性介绍

简介：

SVG.js是一个轻量级的JavaScript库，旨在简化SVG操作并实现动画定义。

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

SVG.js内置了丰富的动画定义方法，包括移动、缩放、旋转和倾斜等，具体效果可参考相关演示。

SVG.js的主要亮点包括：

• 语法简洁且易读

• 体积非常小，gzip压缩后仅5k

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

• 采用模块化结构，便于扩展

• 提供多种实用插件

• 各类形状类型拥有统一的API接口

• 元素支持事件绑定，涵盖触摸事件

• 完全支持不透明蒙版功能

• 支持元素分组

• 支持动态渐变

• 支持填充模式

• 拥有完整的文档记录

SVG.js基础使用与ViewBox配置

使用说明：

创建一个SVG文档

使用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%')

检测浏览器对SVG的支持度

在使用svg.js之前，建议先通过以下代码检测浏览器对该库的支持情况：

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

ViewBox

<svg>元素的属性可以通过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。

SVG 文档

svg.js也可在HTML DOM之外运行，例如以下是一个独立的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其他方法的使用说明，敬请关注！