SVG操作插件:SVG.JS 个人提取部分实用中文文档
先贴出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 个人提取部分实用中文文档的更多相关文章
- js插件---videojs中文文档详解
js插件---videojs中文文档详解 一.总结 一句话总结: js插件网上都有很多参考资料,使用起来也非常简单 二.lavarel中使用实例 <video id="example_ ...
- Web3.js API 中文文档
Web3.js API 中文文档 http://web3.tryblockchain.org/Web3.js-api-refrence.html web3对象提供了所有方法. 示例: //初始化过程 ...
- App.js实现使用js开发app的应用,此文是中文文档
在阅读前,在此说明下,本人英文一直不好,所以该文档是借助翻译工具翻译的,阅读起来可能有点不好,请各位谅解,哪位大神有标准的中文文档请分享下 Github下载地址:https://github.com/ ...
- Chart.js中文文档-雷达图
雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
- 【Chromium中文文档】插件架构
插件架构 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/Plugin_A ...
- Sails.js中文文档
Sails.js中文文档 http://sailsdoc.swift.ren/ Sails.js是一个Web框架,可以于轻松构建自定义,企业级Node.js Apps.它在设计上类似于像Ruby ...
- 以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
- Handlebars.js 中文文档
Home » 前端 » Handlebars.js 中文文档 Handlebars.js 中文文档 Posted in 前端 By KeenWon On 2014年4月3日 Views: ...
- sharp.js中文文档
高性能node.js图像处理库,使用libvips库来实现. 英文地址:sharp.pixelplumbing.com/ 中文文档地址:yunlzhang.github.io/sharp-docum…
随机推荐
- Hadoop 2.7.1 使用minicluster进行单元测试
目的是要跑通这个单元测试:hadoop-hdfs/src/test/java/org/apache/hadoop/hdfs/TestClose.java 这个Java文件比较简单: /** * Lic ...
- CSS3学习笔记--line-height:150%与line-height:1.5的真正区别
代码: <div style="line-height:150%;font-size:16px;"> 父元素内容 <div style="font-si ...
- 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 ...
- Hive Streaming 追加 ORC 文件
1.概述 在存储业务数据的时候,随着业务的增长,Hive 表存储在 HDFS 的上的数据会随时间的增加而增加,而以 Text 文本格式存储在 HDFS 上,所消耗的容量资源巨大.那么,我们需要有一种方 ...
- git 基本配置及使用
GIT是个很方便的开发伴侣,这里 随笔记录下GIT工具的基本使用,也希望能帮到别人更快速的使用GIT. 一,安装软件 toroise是最常用也最习惯的工具了,已经是有支持GIT了. 二,生成密钥文 ...
- 读取并创建excel文件(.xls)
第三方库,附件 缺点:该库只支持.xls文件的操作 1.读取excel文件 例子: try { /** * 后续考虑问题,比如Excel里面的图片以及其他数据类型的读取 **/ InputStream ...
- Window中调试HBase问题小结
1.好久没用log4j了,转到logback好多年了,hbase程序运行时,报缺少log4j配置,那么,就转去logback吧(以下的XXX表示版本号). 原先lib包里面有log4j-XXX.jar ...
- CSS3 页面跳转的动画效果
从左侧弹出: var windowWidth = window.innerWidth; $(atlas_list).css({ "transition":"none&qu ...
- 配置jenkins,并把iOS包自动上传至fir.im
安装jenkins,有两种方式 1.首先要安装 homebrew,利用homebrew来管理安装包十分方便,一条命令就可以 安装 homebrew命令 $ ruby -e "$(curl - ...
- PowerDesigner 16.5对SQL Server 2012 生成数据库时"不支持扩展属性"问题
团队合作设计一套系统数据模型,创建了PDM后,Table.View.Store Procedure等都创建好了,且创建了多个Schema方便管理这些数据库对象,但Table.view.Column等对 ...