使用 Snap.svg 缩放多边形

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')

's' 在这种情况下用于缩放（还有 t 和 r 用于平移和旋转）。您还可以为它指定一个 x,y 缩放量，以及一个缩放的中心点。所以你可以做...

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

以 100,100 为中心，将 x 缩放 2，将 y 缩放 3。

如果需要，您可以阅读此 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 缩放多边形

Using Snap.svg to scale a polygon

javascript

jquery

svg

jquery-animate

snap.svg