Using Snap.svg to scale a polygon

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.

score 1 · Accepted Answer · edited May 23 '17 at 11:45

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.

score 1 · Answer 2 · answered Sep 19 '16 at 05:03

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>

Using Snap.svg to scale a polygon

2 Answers2