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. KMP 理解

    例题 以字符串 ABABACA 为例 a 前缀: 后缀: 结果为0 ab 前缀:a 后缀: b 结果为0 aba 前缀:a ab 后缀: ba a 结果为1,此时 i=2,j=1 abab 前缀:a ...

  2. 【JavaScript代码实现一】数组去重

    function arrayNoDupulate(array) { var hash = {}; var result = []; for(var i=0;i<array.length;i++) ...

  3. .NET面试宝典-基础

    经典.net面试题目 建议使用朗读女软件下载,边读边记. 1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private :   私有 ...

  4. mysql反向解析导致连接缓慢

    Content 0.序 1.问题 2.原因 3.解决办法 0.序 本文主要是记录Mysql安装在 VMWARE下,本地连接Mysql速度很慢的原因及解决办法. 1.问题 本地的一个网站使用mysql数 ...

  5. java 实现输出姓和名

    package xiaojie; import java.util.Scanner; public class baiJiaXing { public static void main(String[ ...

  6. 埃及分解:将2/n分解成为1/x+1/y的格式

    算法 古埃及以前创造出灿烂的人类文明,他们的分数表示却非常令人不解.古埃及喜欢把一个分数分解为类似: 1/a + 1/b 的格式. 这里,a 和 b 必须是不同的两个整数,分子必须为 1 比方,2/1 ...

  7. MVC扩展Filter,通过继承ActionFilterAttribute为登录密码加密

    与ActionFilter相关的接口有2个: □ IActionFilter 对action执行前后处理 void OnActionExecuting(ActionExecutingContext f ...

  8. .NET:“事务、并发、并发问题、事务隔离级别、锁”小议,重点介绍:“事务隔离级别"如何影响 “锁”?

    备注 我们知道事务的重要性,我们同样知道系统会出现并发,而且,一直在准求高并发,但是多数新手(包括我自己)经常忽略并发问题(更新丢失.脏读.不可重复读.幻读),如何应对并发问题呢?和线程并发控制一样, ...

  9. 【BZOJ】【2878】【NOI2012】迷失游乐园

    树形+基环树DP/数学期望 然而我并不会做…… 题解戳这里:http://blog.csdn.net/u011265346/article/details/46328543 好吧先考虑一个简单点的,当 ...

  10. 【HDOJ】【3377】Plan

    插头DP sigh……其实思路很简单的= =就多加一种转移:从(0,0)->(0,0),也就是不走这个格子…… 初始状态就是第一格有一个左插头= =结束状态可以让(n,m)这个位置可以走到(n+ ...