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. Codeforces Round #359 (Div. 1) B. Kay and Snowflake dfs

    B. Kay and Snowflake 题目连接: http://www.codeforces.com/contest/685/problem/B Description After the pie ...

  2. 二值化方法:Kittler:Minimum Error Thresholding

    Kittler二值化方法,是一种经典的基于直方图的二值化方法.由J. Kittler在1986年发表的论文“Minimum Error Thresholding”提出.论文是对贝叶斯最小错误阈值的准则 ...

  3. Map:HashMap和TreeMap

    一.Map集合     特点:将键映射到值得对象 Map集合和Collection集合的区别? Collection:是单列集合,存储的是单独出现的元素    Map: 是双列集合,存储的是键值对形式 ...

  4. HDU 4716 A Computer Graphics Problem (水题)

    A Computer Graphics Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  5. Redhat Enterprise Linux 7.4/CentOS 7.4 安装后初始化配置

    由于我是最小化安装,需要在安装后进行一些配置 1. 设定启动级别 [root@home ~]# systemctl set-default multi-user.target 2. 设定网络 [roo ...

  6. Windows+VS2012环境下编译调试MySQL源码 转

    http://m.blog.csdn.net/blog/SnowyWolf/18952643

  7. MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文 ...

  8. python接口自动化3-自动发帖(session)

    前言 上一篇模拟登录博客园,但这只是第一步,一般登录后,还会有其它的操作,如发帖,评论等,这时候如何保持会话呢? (敲黑板!!!由于博客园最近登录机制变了,登录全部走cookie登录) 一.sessi ...

  9. 每天进步一点点——论fork()函数与Linux中的多线程编程

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/27316803 一.fork()函数     在操作系统的基本概念中进程是程序的一次运行,且是 ...

  10. 使用开源库 SDWebImage 异步下载缓存图片(持续更新)

    source  https://github.com/rs/SDWebImage APIdoc  http://hackemist.com/SDWebImage/doc Asynchronous im ...