ポリゴン

Question

を拡張するSnap.svgを使用して、私は下に作成された多角形を持っている：

var s = Snap('#test'); 

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

polygon.scale(2, 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 \t \t \t \t = Snap('#test'), 
 
\t tl \t \t \t \t = new TimelineMax(), 
 
\t polygonScale \t = 2; \t // 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", { 
 
\t transformOrigin: 'center', 
 
\t 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>