`
xiaoheliushuiya
  • 浏览: 422106 次
文章分类
社区版块
存档分类
最新评论

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操作文档.rar

    3. **变换**:SVG提供transform属性,允许进行平移(translate)、旋转(rotate)、缩放(scale)和倾斜(skew)等变换操作。例如,`transform="translate(50,50)"`将元素向右下移动50个单位。 4. **路径(Path)**...

    svg(SVG)

    3. **SVG变换**:使用`transform`属性,可以实现平移(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)等图形变换。 4. **SVG文本**:通过`<text>`元素添加文本,并可以控制字体、大小、对齐方式和方向...

    svg移动+缩放+拖动添加+事件

    SVG元素的移动可以通过改变其`transform`属性中的`translate()`函数来实现。`translate(x, y)`函数可以将元素沿着x轴和y轴移动。例如,将一个SVG元素向右移动100单位,向下移动50单位,可以写成: ```html <svg> ...

    SVG经典教程1 (SVG从入门到精通)

    SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、移动应用和图形用户界面中。...通过阅读“svg教程1.pdf”,你将能够掌握SVG的核心概念,并具备创建和操作矢量图形的能力。

    SVG 50个实例 SVG实例

    6. **变换**:SVG提供了`transform`属性,支持平移(`translate`)、旋转(`rotate`)、缩放(`scale`)和倾斜(`skewX`和`skewY`)等操作。 7. **文本处理**:`<text>`元素用于在SVG中添加文本,`text-anchor`指定...

    svg画直线中间箭头

    在实际应用中,可以引入如jQuery或Snap.svg等库来简化DOM操作。例如,使用Snap.svg,代码可能如下: ```javascript var s = Snap("#svg"); var line = s.line(10, 10, 200, 100); var midPoint = line.getBBox()....

    SVG精髓-笔记和教程

    使用transform属性可以进行平移(translate)、旋转(rotate)、缩放(scale)以及倾斜(skewX和skewY)等变换操作。 路径(path)在SVG中是一个非常强大的元素,可以用来绘制复杂的形状。它通过一系列的命令来定义...

    SVG基本应用源码

    6. **CH12 - 变换与动画**:SVG提供了强大的变换功能,如translate、scale、rotate等,以及动画机制如animate和animateTransform。源码将展示如何实现图形的动态移动、旋转和缩放,以及制作平滑的动画效果。 7. **...

    最全的SVG教程

    2. **坐标系统与变换**:理解SVG的坐标系统,掌握translate、scale、rotate、skew等变换方法。 3. **渐变和模式**:创建线性渐变、径向渐变以及图案填充,提升图形的视觉效果。 4. **滤镜效果**:利用filter元素实现...

    svg_animation.zip

    同时,SVG图形由XML语法定义,因此可以通过JavaScript进行动态操作,如改变颜色、大小、形状,甚至是创建动画。 jQuery与SVG的结合,使得开发者无需深入学习复杂的SVG动画机制,即可轻松实现复杂的动画效果。jQuery...

    SVG常用图形基础学习资料

    7. **变换**:你可以使用`transform`属性对图形进行旋转(`rotate`)、平移(`translate`)、缩放(`scale`)和倾斜(`skewX`、`skewY`)操作。 8. **组合与剪切**:`<g>`元素用于组合多个图形,方便进行整体操作;...

    SVG绘制多图

    这个标签在SVG设计和动画中扮演着核心角色,因为它提供了组织和操作多个图形的便利性。 首先,让我们深入了解一下 `<g>` 标签的基本用法。`<g>` 标签可以包裹任何SVG图形元素,如`<circle>`, `<rect>`, `<path>`, `...

    svg在移动端的应用-手势图片拖动,手势放大缩小

    - SVG图像可以通过XML代码创建,这使得它们可以被浏览器解析,并允许开发者进行编程操作。 - 由于其矢量特性,SVG在放大时不会出现像素化,保持图像清晰度。 2. 移动端SVG应用: - 在移动设备上,SVG可以提供高...

    svg开发实践PDF电子书

    9. **变换**:讲解`transform`属性,包括translate、rotate、scale、skew等操作,以及如何组合变换。 10. **事件处理**:说明如何为SVG元素添加点击、鼠标移动等交互事件,实现动态效果。 11. **滤镜效果**:介绍...

    SVG经典教程2 (SVG从入门到精通)

    SVG支持平移(translate)、旋转(rotate)、缩放(scale)、倾斜(skewX/Y)等多种变换操作,通过`transform`属性实现。 ### 7. 文本处理 `<text>`元素允许在SVG中添加文本,通过`x`和`y`属性定位,还可以调整字体...

    SVG实现Loading加载按钮动画图标特效.zip

    JavaScript可以通过DOM API操作SVG元素,实现更复杂的交互和动画控制。例如,可以动态修改SVG路径的`d`属性,或者通过`requestAnimationFrame`实现平滑的动画效果。 6. 文件结构解析: 在这个压缩包中,`index....

    hammer.js对svg平移,缩放demo

    总结来说,这个"hammer.js对svg平移,缩放demo"提供了一个简单的例子,展示了如何结合使用`hammer.js`和SVG来实现动态交互式的图形操作。开发者可以基于此进一步扩展功能,比如添加旋转、拖放等其他手势,以实现更...

    HTML5 SVG图形变形效果

    SVG图形变形通常涉及CSS3的变换属性,如`transform`,它可以实现平移(translate)、旋转(rotate)、缩放(scale)和倾斜(skew)。在描述中的“鼠标hover指定元素时SVG图形变形效果”可能指的是使用CSS的`:hover`...

    SVG图片变形

    2. JavaScript库或API:如Snap.svg、d3.js等JavaScript库提供了方便的接口来操作SVG元素,包括path的数据。通过随着时间的推移逐步修改path的`d`属性(即路径数据),可以创建出复杂的变形动画。 具体步骤如下: 1...

    svg学习----基础学习

    5. **变换**:SVG提供`transform`属性,可以对图形进行平移(translate)、旋转(rotate)、缩放(scale)和 skew(倾斜)操作。 6. **渐变**:SVG支持线性渐变(`<linearGradient>`)和径向渐变(`...

Global site tag (gtag.js) - Google Analytics