先贴出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. Navi.Soft30.开放平台.百度.开发手册

    1系统简介 1.1功能简述 现在是一个信息时代,并且正在高速发展.以前获取信息的途径非常少,可能只有电视台,收音机等有限的来源,而现在的途径数不胜数,如:QQ,微信,官方网站,个人网站等等 本开发手册 ...

  2. 利用 a 标签自动解析 url

    很多时候,我们有从 url 中提取域名,查询关键字,变量参数值等的需求,然而我们可以让浏览器方便地帮助我们完成这一任务而不用写正则去抓取.方法就是先创建一个 a 标签然后将需要解析的 url 赋值给  ...

  3. 【C#】取得并改变图像解析度

    , , bmpOrg.Width, bmpOrg.Height);       g.Dispose();       // 画像を保存       string dirName = Path.GetD ...

  4. android apk--程序发布前的准备

    摘自:http://www.cnblogs.com/androidsuperman/p/4396889.html 首先,需要准备的工作: 1   用户协议(可以是本地html资源,也可以是通过webv ...

  5. Digg Reader 登录不了,原来如此

    cdnjs.cloudflare.com 不能访问,你懂的,给 https://cdnjs.cloudflare.com 跟 http://cdnjs.cloudflare.com 架个梯子就可以了, ...

  6. 我的首个MOOC课程《面向对象软件开发实践》

    我的首个MOOC课程<面向对象软件开发实践> 我将在网易云课堂开讲MOOC课<面向对象软件开发实践>(http://mooc.study.163.com/course/YOOK ...

  7. ImageSource的使用

    很多时候,我们会使用图片来装饰UI,比如作为控件背景等.而这些图片可以分为两种形式,即存在于本地文件系统中的图片和存在于内存中的图片对于这两种形式的图片,在WPF中,使用方法不同,下面主要说明针对这两 ...

  8. HIS系统的处方录入控件

    前文<EFW框架Winform前端开发之强大的自定义控件库>中我们介绍了EFW框架中Winform系统中的自定义控件,本章使用自定义控件中的GridBoxCard控件开发了一个HIS系统的 ...

  9. IOS8Preview-xCode_6

    IOS8Preview-xCode_6 what's new What's new in xCode 6 Xcode 6 introduces a radically new way to desig ...

  10. [原]如何在Android用FFmpeg解码图像

    前一篇[原]如何用Android NDK编译FFmpeg 我们知道了如何使用NDK来编译Android平台下使用的FFmpeg动态库.这篇文章我们就可以使用Android下的JNI来调用FFMpeg进 ...