先贴出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. 由于源码使用是c\c++与oc混编导致Unknown type name 'NSString'

    今天看到个问题,编辑工程提示Unknown type name 'NSString',如下图 解决方案三: 将Compile Sources As 改为 Objective-C++

  2. c#如何区分静态只读变量和常量

    常量const 常量就是一个其值永远不会改变的静态字段.常量的值会在编译时自动推算,编译器会在遇到常量时,将其逐个替换为该常量的值.常量可以是C#内建的任何数字类型或枚举类型.声明一个常量的时候必须对 ...

  3. C# 接口的隐式与显示实现

    隐式实现的话实现的方法属于实现的类的,可以直接通过类的对象访问,显式实现的话方法是属于接口的,可以看成是寄托在类中实现的,访问这些方法时要先把对象转换成接口对象,然后通过接口对象调用 一般来讲显式实现 ...

  4. MD5 加密的两种方法

    System.Security.Cryptography.MD5CryptoServiceProvider md5 = new System.Security.Cryptography.MD5Cryp ...

  5. [原创]Android Studio的Instant Run(即时安装)原理分析和源码浅析

    Android Studio升级到2.0之后,新增了Instant Run功能,该功能可以热替换apk中的部分代码,大幅提高测试安装的效率. 但是,由于我的项目中自定义了一些ClassLoader,当 ...

  6. 从今天起,记录CEF使用开发心得经验

    已经使用CEF来呈现桌面程序界面大半年了,从来没有写过相关博文.发现网上的中文资料甚至英文已经无法满足我的开发需求,不少问题只得自己探索.在此先谢过网络上各位CEF使用开发博文的贡献者,没有你们我也难 ...

  7. Mac OSX Versions输入username按1下都会出现2个字符,并且不能create,解决方法

    我的系统,安装的versions1.3.2,下载地址:http://www.jb51.net/softs/193467.html 安装好了以后Versions输入username按1下都会出现2个字符 ...

  8. ASP.NET 如何发现问题的方法

    1.打开IntelliTrace,查看遇到的问题: 2.打开IE8以上,按F12,启动js调试,查看遇到的错误:

  9. ios下Safari无法触发click事件的处理

    ios下的Safari真是傲娇啊,坑好多. 首先上代码 <!DOCTYPE html> <html> <head> <title>122</tit ...

  10. 利用SSIS发送邮件

    璎Nicole珞 博客园 闪存 首页 新随笔 联系 管理 订阅 随笔- 15  文章- 0  评论- 0  SSIS 利用发送邮件服务 Send Email Task   1. 在SSIS中如何发送邮 ...