使用Snap.svg缩放多边形

Question

I have a polygon created below:

var s = Snap('#test');

var polygon = s.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373);

polygon.scale(2, 2);

How do I get the polygon to scale? I want it to grow to twice its size from the center.

Answer 1

You would apply a transform to it.

var polygon = s.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373);
polygon.transform('s2')

's' in this case is for scale (also t and r for translate and rotate). You can also give it an x,y amount of scale, as well as a center point to scale from. So you could do...

polygon.transform('s2,3,100,100') 

To scale x by 2, y by 3 based on a center of 100,100 to scale from.

You can read this SO answer for further details on transform strings if desired.

Answer 2

You could change Scale value by change polygonScale value.

Don't remove viewBox attribute

https://jsfiddle.net/nsrrexdd/

 var s = Snap('#test'), tl = new TimelineMax(), polygonScale = 2; // control var polygon = s.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373); polygon.attr({fill: 'red', class: 'myPolygon'}); // polygon.scale(2, 2); tl.set(".myPolygon", { transformOrigin: 'center', scale: polygonScale }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> <svg id="test" viewBox="0 0 500 500"></svg>