svg translate 操作
function dragElement(evt) {
var target = evt.target;
var id = target.id;
var dx = evt.dx, dy = evt.dy;
var scale = svgcanvas.scale();
var transformBaseVal = target.transform.baseVal;
if(transformBaseVal.numberOfItems == 0){
var transformObject = svgRoot.createSVGTransform();
transformBaseVal.appendItem(transformObject);
}
var transformItem = transformBaseVal.getItem(0);
var transformMatrix = transformItem.matrix;
var ox = transformMatrix.e, oy = transformMatrix.f;
var x = ox + dx / scale, y = oy + dy / scale;
log("scale:" + scale + ",offset:" + dx / scale + "," + dy / scale);
transformItem.setTranslate(x,y);
}
}
svg translate 操作的更多相关文章
- JavaScript对SVG进行操作的相关技术
原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgscript/ 本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识. SVG ...
- 10 个非常实用的 SVG 动画操作JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...
- svg 日常操作
创建svg 文件 <svg> </svg> 详解viewBox SVG Viewport.View Box和preserveAspectRatio 形状 标签内的值可以是百 ...
- d3操作svg路径动画,及dom移动
图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站htt ...
- SVG DOM常用属性和方法介绍
将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...
- 使用SVG基本操作API
前面的话 本文将详细介绍SVG基本操作API,并使用这些API操作实例效果 基础API 在javascript中,可以使用一些基本的API来对SVG进行操作 [NS地址] 因为SVG定义在其自身的命令 ...
- SVG波浪动画
今天来试试用svg+css3制作波浪动画 下图是我制作出的效果 还不错吧 在制作波浪前,首先我们要画波浪啊,至于画波浪,如果你想直接通过计算贝塞尔曲线绘制出波浪... 好吧,那我也不拦着你 我就直接用 ...
- Android中强大的Matrix操作
简介: Matrix翻译字面意思时矩阵,在Android的API中提供了两种Matrix,分别是android.graphics.Matrix 和 android.opengl.Matrix . 后者 ...
- angular7 + d3 显示svg
汇总一些之前没有注意到的问题 总体思路: app只是显示svg为主,接收后端推送的数据改变,显示变化后的svg. 因此,只用d3的数据绑定更新组件里<svg></svg>节点. ...
随机推荐
- BZOJ 3876: [Ahoi2014]支线剧情 带下界的费用流
3876: [Ahoi2014]支线剧情 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=3876 Description [故事背景] 宅 ...
- ProtoBuffer使用笔记
ProtoBuffer是由谷歌研发的对象序列化和反序列化的开源工具,ProtoBuffer和Xml类似,都是数据描述工具,后者使用更为广泛,前者Google内部使用且具有更高的效率.该工具安装和使用都 ...
- Red Hat Enterprise Linux 7.4配置VSFTP服务器
vsftpd(very secure ftp daemon,非常安全的FTP守护进程)是一款运行在Linux操作系统上的FTP服务程序,不仅完全开源而且免费,此外,还具有很高的安全性.传输速度,以及支 ...
- DataTable添加行的方法
方法一: DataTable tblDatas = new DataTable("Datas");DataColumn dc = null;dc = tblDatas.Colum ...
- Moq的一些基本用法
本篇体验Moq的一些基本用法.首先通过NuGet安装Moq.包括: 模拟方法的返回值 模拟方法后执行回调函数 模拟方法依次返回多个值 模拟第二次调用方法返回异常 直接返回被模拟方法的原始返回值 模拟泛 ...
- Unity3d操作的一些技巧知识点和BUG解决方案
自己记录一些东西,转载请良心注明出处. 1.如何同时打开两个UNITY3D项目. 有时候需要对比,或者需要添加另一个项目的某资源到目前项目,同时打开两个项目看起来会比较明了.如果直接打开的话, ...
- KJBitmap与KJHttp的深度用法
摘要 本文原创,转载请注明地址:http://kymjs.com/code/2015/09/24/01这篇文章是对KJFrameForAndroid使用的一个深入学习 之前写过一些有关KJFrame的 ...
- [翻译] RBBAnimation,让你使用关键帧动画更便利
RBBAnimation RBBAnimation is a subclass of CAKeyframeAnimation that allows you to declare your anima ...
- 10 Big Data Possibilities for 2017 Based on Oracle's Predictions
2017 will see a host of informed predictions, lower costs, and even business-centric gains, courtesy ...
- SXH232摄像头使用示范
It occurred to me suddenly that I wanted to program the our camera sensor for PC desktop, just like ...