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. poj 1330 Nearest Common Ancestors 单次LCA/DFS

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19919   Accept ...

  2. GIT(1)----更新代码和上传代码操作的步骤

    1.第一次下载代码 a.首先获得下载的地址,可从服务器,或者GitHut上获得.例如http://100.211.1.110:21/test/test.git b.终端里切换到想要将代码存放的目录,在 ...

  3. [转载] 使用Kettle进行数据迁移(ETL)

    由于开发新的系统,需要将之前一个老的C/S应用的数据按照新的数据设计导入到新库中.此过程可能涉及到表结构不一致.大数据量(千万级,甚至上亿)等情况,包括异构数据的抽取.清洗等等工作.部分复杂的工作需要 ...

  4. ARM ® and Thumb ®-2 指令系统

    指令表关键词        Rm {, <opsh>} 寄存器移位方式,将寄存器的移位结果作为操作数而Rm值保持不变       <Operand2> 灵活的使用第二个操作数. ...

  5. c#分页工具类,完美实现List分页

    using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Proje ...

  6. [html5]使用localStorage兼容低版本Safari无法使用indexeddb的情况

    摘要 简单场景描述:将html5开发的app内嵌入ios app中,有部分数据,需要在本地存储,就想到使用浏览器的localstorage或者indexeddb,另外localstorage存储的方式 ...

  7. 在Windows Server 2008 R2中使用web方式修改域用户账户密码

    在Windows的domain环境下,加域的客户端修改账户密码是一件很easy的事情:即使没有加域的客户端如果组织中,使用Exchange邮件系统,借助Exchange的owa也可以轻松修改账户密码. ...

  8. 1、Cocos2dx 3.0游戏开发找小三之前言篇

    尊重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27094663 前言 Cocos2d-x 是一个通用 ...

  9. 找回 : MobileCoreServices.framework

    MobileCoreServices.framework   丢失后,可通过如下方式找回: 1.在同事机器上拷贝一个. 路径: 2.重装一个xcode 实践:将xcode4.5下的文件拷到xcode4 ...

  10. .NET:何时应该 “包装异常”?

    背景 提到异常,我们会想到:抛出异常.异常恢复.资源清理.吞掉异常.重新抛出异常.替换异常.包装异常.本文想谈谈 “包装异常”,主要针对这个问题:何时应该 “包装异常”? “包装异常” 的技术形式 包 ...