如何改变raphael图标的大小？

Question

如何从免费的拉斐尔图标改变图标的​​宽度和高度？

我尝试使用attr,试图使用%,像这样var paper = Raphael("canvas", 100%, 100%);.

我需要这样做:如果我改变父块的大小,我的图标的大小也会改变.

upd:我尝试使用"scale"和"transform",但是图标从中心调整大小并且不能正确地适合父级

Answer 1

根据 Raphael.js 文档

\n\n

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

\n\n\n\n

检查这个小提琴：\n所有转换的演示

\n\n

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

\n\n\n\n

所以在你的情况下，你必须这样做：

\n\n

\n

var somename = paper.path("路径坐标").transform(\'s2,3\');

\n

\n\n

其中 2 表示宽度，3 表示高度。

\n