先贴出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 使用minicluster进行单元测试

    目的是要跑通这个单元测试:hadoop-hdfs/src/test/java/org/apache/hadoop/hdfs/TestClose.java 这个Java文件比较简单: /** * Lic ...

  2. CSS3学习笔记--line-height:150%与line-height:1.5的真正区别

    代码: <div style="line-height:150%;font-size:16px;"> 父元素内容 <div style="font-si ...

  3. android: adapter getView(position==0) was invoked many times.

    this is a big problem for me. i follow the solutions that i  searched from the internet: modify the ...

  4. Hive Streaming 追加 ORC 文件

    1.概述 在存储业务数据的时候,随着业务的增长,Hive 表存储在 HDFS 的上的数据会随时间的增加而增加,而以 Text 文本格式存储在 HDFS 上,所消耗的容量资源巨大.那么,我们需要有一种方 ...

  5. git 基本配置及使用

    GIT是个很方便的开发伴侣,这里 随笔记录下GIT工具的基本使用,也希望能帮到别人更快速的使用GIT. 一,安装软件   toroise是最常用也最习惯的工具了,已经是有支持GIT了. 二,生成密钥文 ...

  6. 读取并创建excel文件(.xls)

    第三方库,附件 缺点:该库只支持.xls文件的操作 1.读取excel文件 例子: try { /** * 后续考虑问题,比如Excel里面的图片以及其他数据类型的读取 **/ InputStream ...

  7. Window中调试HBase问题小结

    1.好久没用log4j了,转到logback好多年了,hbase程序运行时,报缺少log4j配置,那么,就转去logback吧(以下的XXX表示版本号). 原先lib包里面有log4j-XXX.jar ...

  8. CSS3 页面跳转的动画效果

    从左侧弹出: var windowWidth = window.innerWidth; $(atlas_list).css({ "transition":"none&qu ...

  9. 配置jenkins,并把iOS包自动上传至fir.im

    安装jenkins,有两种方式 1.首先要安装 homebrew,利用homebrew来管理安装包十分方便,一条命令就可以 安装 homebrew命令 $ ruby -e "$(curl - ...

  10. PowerDesigner 16.5对SQL Server 2012 生成数据库时"不支持扩展属性"问题

    团队合作设计一套系统数据模型,创建了PDM后,Table.View.Store Procedure等都创建好了,且创建了多个Schema方便管理这些数据库对象,但Table.view.Column等对 ...