且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何相对于其中心点旋转或缩放(变换)SVG路径?

更新时间:2022-03-14 22:36:32

真的它的情况下选择适合你的需要的图书馆,然后你会想办法。因为BigBadaboom说,如果你做一个搜索,有很多解决方案。

Really its a case of pick the library that suits your needs, and then you will figure a way. As BigBadaboom says, if you do a search, there are lots of solutions.

要尝试并结合你的问题,有时棘手的是使用一个现有的DOM对象,我在Snap.svg中包含了一个示例。

To try and combine your questions, as sometimes the tricky bit is using an existing DOM object, I've included an example in Snap.svg. You can often do something similar in most libraries.

jsfiddle这里

jsfiddle here Fiddle using your existing html.

s = Snap("#mySVGContainer1");   // create a canvas from existing svg

var triangle1 = s.select("#myShape1").transform("r90"); //select&transform existing object


p = Snap("#mySVGContainer2");

var triangle2 = p.select("#myShape2");
var bbox = triangle2.getBBox(); //bounding box, centre cx/cy

//rotate and scale with transform string (raphael/snap format)
triangle2.animate({ transform: "r180," + bbox.cx + ',' + bbox.cy + "s3,3," + bbox.cx + "," + bbox.cy }, 2000);