Snap SVG - 移动加载的元素

我试图使用Snap SVG library在屏幕上移动SVG图形中的元素。这是元素的代码：Snap SVG - 移动加载的元素

<g id="butterfly"> 
    <path id="wings" fill="#FFFFFF" stroke="#CFEA90" stroke-width="4" stroke-miterlimit="10" d="M139.741,74.038c-5.847-1.477-11.794,1.029-14.605,5.736c-0.463-5.791-5.095-10.963-11.275-12.115c-7.017-1.309-13.365,3.059-14.179,9.755c-0.654,5.381,2.469,10.622,7.36,13.155c-0.143,0.146-0.28,0.284-0.403,0.402c-3.157,3.055-2.81,7.082,0.777,8.994c3.586,1.912,9.053,0.985,12.211-2.071c0.836-0.809,1.773-2.517,2.632-4.62c-0.068,2.586,0.13,4.835,0.632,6.038c1.724,4.127,6.377,7.274,10.394,7.031c4.017-0.244,5.876-3.786,4.152-7.913c-0.067-0.16-0.14-0.343-0.215-0.538c5.45-0.264,10.315-3.753,11.775-8.957C150.814,82.459,146.669,75.79,139.741,74.038z"/> 
    <path id="body" fill="#97BD40" d="M123.467,99.008c-0.3,1.287-1.587,2.086-2.873,1.786l0,0c-1.287-0.3-2.086-1.587-1.786-2.873l5.159-22.099c0.3-1.287,1.587-2.086,2.873-1.786l0,0c1.287,0.3,2.086,1.587,1.786,2.873L123.467,99.008z"/> 
</g>

我想移动这个元素在屏幕上（例如，我想将它移动起来，然后离开，然后再次下降到初始位置），所以我首先创建一个画布并获取元素。我使用此代码：

var canvas = Snap("div#canvas"); 

Snap.load("MyImage.svg", function (image) { 

    var butterfly = image.select("g#butterfly");  
    canvas3.append(butterfly); 

    // Now I want to move the element around... 
}

有没有人有想法？

我发现有关移动圆形或矩形，其具有的属性类似X，ÿ，CX信息或CY，很容易修改，但对我来说我不有那些属性...

来源

2014-01-28 MikO

Set a transform关于蝴蝶。你需要一个翻译转换来移动它。例如。

butterfly.transform("t100,100");

syntax与Raphael相同。但你也可以使用一个Snap matrix

var t = new Snap.Matrix() 
t.translate(100, 100); 
butterfly.transform(t);

来源

2014-01-28 11:44:20

'butterfly.transform（“t100,100”）;'什么100之前是t在这里做什么？ – mwallisch

t = translate = move x，y – ifunk

这对我来说真的很糟糕，我怎么能简单地设置x = 1，y = 1？ –

的SVG变换属性适用的转换列表的元素和它的孩子（在这里是在一个很好的教程：https://www.dashingd3js.com/svg-group-element-and-d3js）。您可以使用不同类型的转换;例如，作为托蒂要求，只是移到X = 1和Y = 1，你会使用这个答案对

myElement.setAttribute('transform','translate(30,100)');

更多信息：How to manipulate translate transforms on a SVG element with javascript in chrome?。一旦你了解更多你发现你甚至可以真正轻松地使用动画与捕捉：

myElement.animate({ transform:'translate(30,100)'}, 700, mina.bounce);

来源

2014-12-04 16:53:15 anngelfra

Snap SVG - 移动加载的元素

回答

相关问题