专栏首页王金龙的专栏svg.js教程及使用手册详解(一)

svg.js教程及使用手册详解(一)

   做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG。网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言。网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg.js这样的集成的SVG库进行具体讲解的教程,做这件事的,本文应该是第一篇,也是给那些需要动态的使用SVG的兄弟们一点帮助。

简介:

SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画。 SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。  SVG.js中包含了大量用于定义动画的方法,如移动、缩放、旋转、倾斜等,具体可参阅相关演示。 

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文档中产生以下代码:

<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之前,可以先用以下的代码来检测浏览器对svg.js这个库的支持情况:

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

ViewBox

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

SVG 文档

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,viewbox等内容,下面将持续更新svg.js的其他方法的用法,敬请关注!

原文链接:http://www.jinlongtalk.com/2017/02/21/svg-js1/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【原创】腾讯面试官:线程池要设置多大

    有个朋友Hunter跟我聊,最近他参加腾讯的面试,在二面的时候被问到了关于线程池线程数目设置的一个问题。此处记录下这个问题的面试过程,以及后面关于此问题的理论方...

    王金龙
  • Kafka系列3:深入理解Kafka消费者

    上面两篇聊了Kafka概况和Kafka生产者,包含了Kafka的基本概念、设计原理、设计核心以及生产者的核心原理。本篇单独聊聊Kafka的消费者,包括如下内容:

    王金龙
  • Kafka系列3:深入理解Kafka消费者

    上面两篇聊了Kafka概况和Kafka生产者,包含了Kafka的基本概念、设计原理、设计核心以及生产者的核心原理。本篇单独聊聊Kafka的消费者,包括如下内容:

    王金龙
  • 在博客园的markdow编辑器中使用SVG

    绿巨人
  • 高清ICON SVG解决方案(下) - 腾讯ISUX

    腾讯ISUX
  • 玩转基因组浏览器之展示RNA二级结构

    除了展示GTF, bed等常规格式的基因结构信息,IGV还可以展示RNA的二级结构,在下面这篇文章中,就是通过IGV的这一功能来直观的展示RNA二级结构

    生信修炼手册
  • Jmeter系列(13)- 取样器Samplers 的入门介绍

    https://www.cnblogs.com/poloyy/category/1746599.html

    小菠萝测试笔记
  • MachineLearing---SVM

    yix今天我们来看看机器学习中的SVM,SVM是什么呢,它的中文名叫支持向量机(Support Vector Machine),是机器学习中的一种分类算法。

    我被狗咬了
  • Bandit:一款Python代码安全漏洞检测工具

    Bandit这款工具可以用来搜索Python代码中常见的安全问题,在检测过程中,Bandit会对每一份Python代码文件进行处理,并构建AST,然后针对每一个...

    FB客服
  • python socks5 proxy实

    py3study

扫码关注云+社区

领取腾讯云代金券