使用 Snap.svg 缩放多边形答案

【问题标题】：Using Snap.svg to scale a polygon使用 Snap.svg 缩放多边形
【发布时间】：2017-01-14 12:26:01
【问题描述】：

我在下面创建了一个多边形：

var s = Snap('#test');

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

polygon.scale(2, 2);

如何让多边形按比例缩放？我希望它从中心增长到两倍大小。

【问题讨论】：

标签： javascript jquery svg jquery-animate snap.svg

【解决方案1】：

您将对其应用转换。

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

在这种情况下，

's' 用于缩放（t 和 r 也用于平移和旋转）。你也可以给它一个 x,y 的比例，以及一个从中缩放的中心点。所以你可以这样做......

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

基于 100,100 的中心将 x 缩放 2，y 缩放 3。

如果需要，您可以阅读此SO answer 了解有关转换字符串的更多详细信息。

【讨论】：

【解决方案2】：

您可以通过更改 polygonScale 值来更改 Scale 值。

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>

【讨论】：