如何更改 Raphael JS 绘制的路径的宽度和高度？答案

【问题标题】：How to change path's width and height drawn by Raphael JS?如何更改 Raphael JS 绘制的路径的宽度和高度？
【发布时间】：2012-05-21 07:57:42
【问题描述】：

我有路径，然后用Raphael JS 绘制。代码如下所示：

var paper = Raphael($('#draw_here')[0], '32', '32');

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!'
});

它可以画出 32 x 32 像素的大星星。 如何改变它的宽高？

我尝试过这样做：

var paper = Raphael($('#draw_here')[0], 64, 64);

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!',
    width: 64,
    height: 64
});

...但所有变化都是“纸元素”的宽度和高度，而不是星星的。

我想做的事情是当鼠标光标在它上面时，星星变大的效果。

感谢您的任何建议！

附：路径不是我自己写的，来自Iconic set。

【问题讨论】：

标签： javascript svg drawing raphael dimensions

【解决方案1】：

你也必须调整路径！只需在Raphaël Playground 上尝试一下即可。

width和height属性只是要绘制的元素的大小，但路径坐标仍然相同。

您也可以使用简单的调整大小

star.transform("s2");

像以前一样将其大小调整为2x。

如果不想编辑路径并简单地缩放它，你应该使用transform方法来调整它的大小，并使用translate将完整路径调整一定的值。

star.transform("t32,32 s2");

例如，这会将对象从顶部移动32px，从左侧移动32px，并像以前一样将其大小调整为2x。

【讨论】：

谢谢，这简直太棒了！ ^^