animation - で使用される SVG のサイズを小さくする方法 : Raphael を使用したアニメーション スキル図

Question

次のプラグインを自分のウェブサイトhttp://tympanus.net/codrops/2011/04/22/animated-skills-diagram/comment-page-3/#commentsに実装しました

残念ながら、使用される svg の設定幅は 600px x 600px です。サイズを 350 px の小さいものに上書きしようとしましたが、うまくいきませんでした。svg の一部を切り取るだけです。アニメーションを小さくする方法についてアドバイスをもらえますか?

前もってありがとう、エヴ・チェン

Answer 1

ビューボックスを使用して、svg をスケーリングできます。svg コンテナーを、通常はトリミングが発生するサイズに設定してから、ビューボックスを 600px x 600px に設定して、サイズ変更できるようにします。

http://raphaeljs.com/reference.html#Paper.setViewBox

paper.setViewBox(0, 0, 600, 600, true)

これにより、指定された領域 (600 x 600) がコンテナーに収まります。