Svg操作
SVG文件的JavaScript操作
获取SVG DOM
如果使用img标签插入SVG文件,则无法获取SVG DOM。使用object、iframe、embed标签,可以获取SVG DOM。
var svgObject = document.getElementById("object").contentDocument;
var svgIframe = document.getElementById("iframe").contentDocument;
var svgEmbed = document.getElementById("embed").getSVGDocument();
由于svg文件就是一般的XML文件,因此可以用DOM方法,选取页面元素。
// 改变填充色
document.getElementById("theCircle").style.fill = "red"; // 改变元素属性
document.getElementById("theCircle").setAttribute("class", "changedColors"); // 绑定事件回调函数
document.getElementById("theCircle").addEventListener("click", function() {
console.log("clicked")
});
读取svg源码
由于svg文件就是一个XML代码的文本文件,因此可以通过读取XML代码的方式,读取svg源码。
假定网页中有一个svg元素。
<div id="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="500" height="440">
<!-- svg code -->
</svg>
</div>
使用XMLSerializer实例的serializeToString方法,获取svg元素的代码。
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
将svg图像转为canvas图像
首先,需要新建一个img对象,将svg图像指定到该img对象的src属性。
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg); img.src = url;
然后,当图像加载完成后,再将它绘制到canvas元素。
img.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
};
Svg操作的更多相关文章
- 强大的svg操作库——Raphael
先常规先引入Raphael库: <script src="raphael.js" type="text/javascript"></scrip ...
- SVG操作插件:SVG.JS 个人提取部分实用中文文档
先贴出github地址:https://github.com/svgdotjs/svg.js(也就是原文档的说明和文件的下载地址) 创建SVG文档 var draw = SVG('drawing'). ...
- selenium玩转svg操作
今天写脚本发现页面有svg结构,里面的元素无法定位,查找很多资料,然后就记录下来 初步尝试直接在页面中获取svg中包含元素的xpath,直接利用selenium方法访问,无法捕获到相关元素信息. SV ...
- svg操纵方案 基于 D3 还是 angular?
之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案 基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...
- 20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...
- D3--数据可视化实战总结
d3理解 标签(空格分隔): 未分类 1.绑定数据 [x] 定义:通过循环的方式将数据绑定在dom元素上,每个数据对应一个元素,所以这个数据的值就能来设定dom元素的width,height,x,y坐 ...
- 上手d3js
0---什么是d3js: d3js是一个开源的,基于对svg操作的数据可视化框架,简单的说他提供了数据提供了一系列的数据可视化工具,可以用他很方便的创造出关于svg的动画:svg动画具有可伸缩,不失真 ...
- 在 Angular 2 Component 中使用第三方 JS 库
本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.sv ...
- vue系列---snabbdom.js使用及源码分析(九)
一:什么是snabbdom? 在学习Vue或React中,我们了解最多的就是虚拟DOM,虚拟DOM可以看作是一颗模拟了DOM的Javascript树,主要是通过vnode实现一个无状态的组件,当组件状 ...
随机推荐
- jQuery 的ready事件和 JavaScript 的load事件对比
为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...
- oracle删除互相关联的记录
今天遇到一个问题,在数据库中删除一条记录,但是在删除的时候报错了,报出该记录已经被其他子记录引用,想了好久不知道怎么做,后来发现报错提示信息中会提示删除该记录时影响了那个约束条件,于是思路出来了: 1 ...
- 关于$_SERVER 常量 HTTP_X_FORWARDED_HOST与 HTTP_HOST的问题
今天在看ecshop的源码,发现了用$_SERVER['HTTP_X_FORWARDED_HOST']来判断主机的地址,就目前来说很多人都是直接通过$_SERVER['HTTP_HOST']来判断的, ...
- SSH的内网穿透
SSH的内网穿透 1.内网: ssh -N -f -R 2222:127.0.0.1:22 lienzh@我的PC的IP2.外网: ssh -p 2222 root@localhost ...
- UVA11388 GCD LCM(数论)
题目链接. 题意: 给定两个数,一个G,一个L,找出两个数a,b(a<=b),使得这两个数的最大公约数为G,最小公倍数为L,且(a最小). 分析: 当a,b存在时,a一定为G. 自己证了一下,数 ...
- windows客户端连接到samba服务器(如何使用samba)
首先确保你的服务端已经配置好samba并成功启动服务,方法可参考此文章http://blog.csdn.net/linglongwunv/archive/2010/01/19/5212875.aspx ...
- Delphi 多线程的操作
Delphi 操作多线程的代码, 在项目中需要在webservice中使用多线程,程序思想如下: 1.就创建一个线程, 也就是说有两个线程,主线程和创建的线程, 主线程用于程序的别的操作,例如停止服务 ...
- 值得收藏的Javascript代码
1 Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...
- HDU 5514 Frogs (容斥原理)
题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=5514 题意 : 有m个石子围成一圈, 有n只青蛙从跳石子, 都从0号石子开始, 每只能越过a[i] ...
- yum puppet dashboard
该Dashboard是一种运行在Rails上的Ruby应用程序,它还不是可以添加到系统版本中的程序包,但是我们可以从Puppet Labs以RPM或者DEB包的形式获得该软件.我们也可以选择从资源进行 ...