Question

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

var s = Snap('#test');

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

polygon.scale(2, 2);

如何缩放多边形？我希望它从中心增长到两倍。

Answer 1

您可以对其应用变换。

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

＆＃39; S＆＃39;在这种情况下是缩放（也是翻译和旋转的t和r）。您还可以给它一个x，y的比例量，以及一个可以缩放的中心点。所以你可以......

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

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

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

Answer 2

您可以通过更改polygonScale值来更改比例值。

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>

使用Snap.svg缩放多边形

2 个答案: