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 操作的更多相关文章

  1. JavaScript对SVG进行操作的相关技术

    原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgscript/   本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识. SVG ...

  2. 10 个非常实用的 SVG 动画操作JavaScript 库

      SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...

  3. svg 日常操作

    创建svg 文件 <svg> </svg> 详解viewBox  SVG Viewport.View Box和preserveAspectRatio 形状  标签内的值可以是百 ...

  4. d3操作svg路径动画,及dom移动

    图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站htt ...

  5. SVG DOM常用属性和方法介绍

    将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...

  6. 使用SVG基本操作API

    前面的话 本文将详细介绍SVG基本操作API,并使用这些API操作实例效果 基础API 在javascript中,可以使用一些基本的API来对SVG进行操作 [NS地址] 因为SVG定义在其自身的命令 ...

  7. SVG波浪动画

    今天来试试用svg+css3制作波浪动画 下图是我制作出的效果 还不错吧 在制作波浪前,首先我们要画波浪啊,至于画波浪,如果你想直接通过计算贝塞尔曲线绘制出波浪... 好吧,那我也不拦着你 我就直接用 ...

  8. Android中强大的Matrix操作

    简介: Matrix翻译字面意思时矩阵,在Android的API中提供了两种Matrix,分别是android.graphics.Matrix 和 android.opengl.Matrix . 后者 ...

  9. angular7 + d3 显示svg

    汇总一些之前没有注意到的问题 总体思路: app只是显示svg为主,接收后端推送的数据改变,显示变化后的svg. 因此,只用d3的数据绑定更新组件里<svg></svg>节点. ...

随机推荐

  1. 开发移动端web页面click事件失效问题

    这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...

  2. .vs目录有什么用?

    写这篇博文的目的就是方便后来者能够在百度里轻松搜到. 反正我找了半天没找到关于.vs目录的介绍,最后还是在同事的帮助下才找到的. 参考地址:https://developercommunity.vis ...

  3. jquery 图片预加载

    /图片无序预加载 (function($){ function Preload(imgs,fns){ this.imgs=(typeof imgs==="string")?[img ...

  4. POJ 2104 && POJ 2761 (静态区间第k大,主席树)

    查询区间第K大,而且没有修改. 使用划分树是可以做的. 作为主席树的入门题,感觉太神奇了,Orz /* *********************************************** ...

  5. WINDOWS 线程 纤程 进程

    http://www.cnblogs.com/edisonchou/p/4848131.html#3277980

  6. Leptonica在VS2010中的编译及简单使用举例

    在tesseract-ocr中会用到leptonica库.这里对leptonica简介下. Leptonica是一个开源的图像处理和图像分析库,它的license是BSD 2-clause.它主要包括 ...

  7. 拆解探索MagSafe电源接口结构和指示灯变颜色原理

    你有没有想过一个Mac的MagSafe接头里面有什么? 控制光线是什么? 在Mac如何知道它是什么样的充电器? 本文探讨的MagSafe连接器内,并回答这些问题. 2006年由苹果公司推出的MagSa ...

  8. Oracle学习中,重点是sql语句的学习,而所有的sql语句都要在scott用户下完成。

    熟悉这个用户下的四张表,是必要的. 查看所有表名: SELECT * FROM tab; 查看每张表的结构: DESC 表名称: 1.部门表:dept no  名称 类型 描述 1 DEPTNO NU ...

  9. Android之LogUtil

    提供debug与release的时候是否屏蔽打印信息,把信息选择性的进行保存,可以是否自动保存crash的堆栈信息.来自github上的一个开源项目,https://github.com/syxc/L ...

  10. python文件目录操作

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...