先贴出github地址:https://github.com/svgdotjs/svg.js(也就是原文档的说明和文件的下载地址)

创建SVG文档

var draw = SVG('drawing').size(300, 300) //设置大小,如果是百分比则跟随父窗体变化,drawing是html的divid
var rect = draw.rect(100, 100).attr({ fill: '#f06' })//draw.rect 画一个矩形,fill颜色是#06
html元素:
<div id="drawing"></div>

 

此时已经可以运行,运行生成的html代码如下:

<div id="drawing">
<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之前对该当前使用的浏览器进行判断,是否支持SVG

if (SVG.supported) {
//如果支持则生成
var draw = SVG('drawing')
var rect = draw.rect(100, 100)
} else {
//不支持则提示
alert('SVG not supported')
}
创建一个链接的SVG,不要忘了draw对象文档的创建
var link = draw.link('http://svgjs.com')
var rect = link.rect(100, 100)

此外关于链接还有N多个相关操作,可以观看原文,顺便求大神完整汉化一遍

..对我来说这些够用了,希望对大家能有一点帮助


SVG操作插件:SVG.JS 个人提取部分实用中文文档的更多相关文章

  1. js插件---videojs中文文档详解

    js插件---videojs中文文档详解 一.总结 一句话总结: js插件网上都有很多参考资料,使用起来也非常简单 二.lavarel中使用实例 <video id="example_ ...

  2. Web3.js API 中文文档

    Web3.js API 中文文档 http://web3.tryblockchain.org/Web3.js-api-refrence.html web3对象提供了所有方法. 示例: //初始化过程 ...

  3. App.js实现使用js开发app的应用,此文是中文文档

    在阅读前,在此说明下,本人英文一直不好,所以该文档是借助翻译工具翻译的,阅读起来可能有点不好,请各位谅解,哪位大神有标准的中文文档请分享下 Github下载地址:https://github.com/ ...

  4. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

  5. 【Chromium中文文档】插件架构

    插件架构 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/Plugin_A ...

  6. Sails.js中文文档

    Sails.js中文文档   http://sailsdoc.swift.ren/ Sails.js是一个Web框架,可以于轻松构建自定义,企业级Node.js Apps.它在设计上类似于像Ruby ...

  7. 以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明

    以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...

  8. Handlebars.js 中文文档

    Home  »  前端   »   Handlebars.js 中文文档 Handlebars.js 中文文档 Posted in 前端 By KeenWon On 2014年4月3日 Views:  ...

  9. sharp.js中文文档

    高性能node.js图像处理库,使用libvips库来实现. 英文地址:sharp.pixelplumbing.com/ 中文文档地址:yunlzhang.github.io/sharp-docum…

随机推荐

  1. Hadoop 2.7.1 源代码目录结构分析

    采用的源代码是2.7.1的,从这个网站下可以找到2.7.1的代码:https://git1-us-west.apache.org/ ,使用gitclone出来,然后git checkout到2.7.1 ...

  2. Mac 安装终端软件

    1.安装或者重新安装lua环境 下载 lua 地址: http://www.lua.org/versions.html 1.进入 lua 目录 2.make macosx 3.sudo make in ...

  3. Centos 6.5 下安装socket5代理

    ---恢复内容开始--- 1. 安装 先安装依赖库 yum -y install gcc gcc-c++ automake make pam-devel openldap-devel cyrus-sa ...

  4. vs多项目模板及add-in开发

    本文分2部分 第一为自定义多项目模板 第二为vs add-in开发 效果图 1.自定义模板 2. 工具菜单 3.窗口 4.工程 5.文件 ... 一. 多项目模板 单项目模板做起来很简单 选中一个项目 ...

  5. ios中将事件添加到系统日历

    - (void)saveEvent:(id)sender { //事件市场 EKEventStore *eventStore = [[EKEventStore alloc] init]; //6.0及 ...

  6. ikvm.net简介

    ikvm.net是什么 http://www.ikvm.net/ ikvm.net是能够运行在mono和.net framework的java虚拟机.它包括了 在.net中实现的一个java虚拟机 j ...

  7. shell 常用命令

    Terminal是Mac OS X系统中的字符控制界面,可以更灵活地控制苹果电脑以下看到 “>“ 就是打指令的地方,prompt,指令列>pwd列出路径>ls列出此档案夹里所有的东西 ...

  8. 十九、【.Net开源】EFW框架核心类库之WCF控制器

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.1:http://pan.baidu.com/s/1qWJjo3U EFW框架实例源代码下载:http://pan.baid ...

  9. DSP中CMD文件

    DSP中CMD文件 (2012-12-26 20:54:17) 转载▼ 标签: 杂谈 分类: DSP FPGA DSP的存储器的地址范围,CMD是主要是根据那个来编的.CMD 它是用来分配rom和ra ...

  10. SupportV7包中 SwipeRefreshLayout 修改下拉控件的距离

    //修改下拉距离 ViewTreeObserver vto = mCategoryResults.mSwipeRefreshLayout.getViewTreeObserver(); vto.addO ...