javascript - ラファエルのアイコンのサイズを変更するには?

Question

無料の Raphael アイコンからアイコンの幅と高さを変更するにはどうすればよいですか?

使ってattrみた、使ってみた%、こんな感じvar paper = Raphael("canvas", 100%, 100%);。

親ブロックのサイズを変更すると、アイコンのサイズも変更されます。

upd：「スケール」と「変換」を使用しようとしましたが、アイコンが中央からサイズ変更され、親に正しく収まりません

Answer 1

Raphael.jsのドキュメントによると

var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");
// or even wrap
el.transform("t50,50...t-50-50");
// to reset transformation call method with empty string
el.transform("");
// to get current value call it without parameters
console.log(el.transform());

---

このフィドルを確認してください：すべての変換のデモンストレーション

var icon = paper.rect(100,200,100,100);

var anim = Raphael.animation({
    "10%":{transform:'t100,0'}, //transform on x-axis
    "20%":{transform:'...t0,100'},//transform on y-axis
    "30%":{transform:'...t-100,0'},//transform on x-axis(negative)
    "40%":{transform:'...t0,-100'},//transform on y-axis(negative)
    "50%":{transform:'...t200,200'},//transform diagonally
    "60%":{transform:'...t-100,-100'},//transform diagonally(negative)
    "70%":{transform:'...s1,1.5'},//scale y-axis
    "80%":{transform:'...s1.5,1'},//scale x-axis
    "90%":{transform:'...s2'},//scale in both direction
    "100%":{transform:'...r45'},//rotate
},5000);

icon.animate(anim.delay(1000));

---

したがって、あなたの場合、これを行う必要があります：

var somename = paper.path（ "パス座標"）.transform（'s2,3'）;

ここで、2は幅、3は高さです。