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>节点. ...
随机推荐
- Codeforces Round #294 (Div. 2)A - A and B and Chess 水题
A. A and B and Chess time limit per test 1 second memory limit per test 256 megabytes input standard ...
- [Visual Studio] SOA服务框架搭建
1.服务框架搭建 2.服务模板创建 3.Nuget引用 4.客户端调用 任务点: 1.分析SOA 2.修改SOA架构名称以及关键字 3.使用Nuget添加引用 4.选择服务模板进行创建 5.尝试调用 ...
- paypal对接
paypal支付接口准备工作 首先去申请一个paypal账号,https://www.paypal.com/. 申请完毕并登录,进入https://developer.paypal.com/devel ...
- CareerCup之1.3字符串去重
[题目] 原文: 1.3 Design an algorithm and write code to remove the duplicate characters in a string witho ...
- MultCloud – 支持数据互传的网盘管理
MultCloud https://www.multcloud.com/ 是一款在线服务,可以在一个地方管理众多网盘,支持国产百度盘, 最具有特色的地方是你可以直接在 MultCloud 里操作将 D ...
- .NET泛型01,为什么需要泛型,泛型基本语法
.NET泛型或许是借鉴于C++泛型模版,借助它可以实现对类型的抽象化.泛型处理,实现了类型和方法之间的解耦.一个最经典的运用是在三层架构中,针对不同的领域模型,在基接口.基类中实现针对各个领域模型的泛 ...
- Shimmer辉光动画效果
Shimmer辉光动画效果 效果 源码 https://github.com/facebook/Shimmer https://github.com/YouXianMing/Animations // ...
- 比起 JSON 更方便、更快速、更簡短的 Protobuf 格式
Protocol Buffers 是由 Google 所推出的一格式(後台真硬),你可以把它想像成是 XML 或 JSON 格式,但是更小.更快,而且更簡潔.這能夠幫你節省網路與硬體資源,且你只需要定 ...
- 在Java程序中使用Hibernate
Hibernate是一种ORM框架,ORM全称为Object-Relative Database-Mapping,在Java对象与关系数据库之间建立某种映射,以实现直接存取Java对象(一般为实体类) ...
- @Java类加载器及双亲委派模型
类与类加载器 虚拟机设计团队把类加载阶段的"通过一个类的全限定名来获取此类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个 ...