Element.transform()
メソッドに精通していますか?対処するのは少し難しいかもしれませんが、スケーリングして変換することができます。
提供したオブジェクトに基づいて、このようなものが必要になります。(これはコード内の変数であるため、任意に塗りつぶしの色に濃い赤を選択し、デモ用にボックスの座標を変更しました。)
var svg = [10,30,255.3,298.5,
{type:'path',
path:'M 35.3 257.2 C 34.4 245.7 45.4 234.1 48.5 223 C 53.6 249.2',
'fill':"#900",
'stroke':'none',
'stroke-width':'0',
'fill-opacity':'1',
'stroke-opacity':'0'}];
var paper = Raphael(0, 0, 500, 500);
var frame = paper.rect(svg[0], svg[1], svg[2], svg[3]);
var line = paper.path();
for (var prop in svg[4]) if (svg[4].hasOwnProperty(prop)) {
// if the key is a valid Raphael attribute, add it
if (Raphael._availableAttrs.hasOwnProperty(prop)) {
line.attr(prop, svg[4][prop]);
}
}
次に、ボックスに対して形状を移動し、スケーリングする関数を作成できます。
function moveShapeTo(box, shape, x, y, s) {
console.log(shape.getBBox());
//current upper-left corner of shape's bounding box
var shape_xy = { x: shape.getBBox().x, y: shape.getBBox().y };
// target location (coordinates relative to parent box)
var target_xy = { x: box.getBBox().x + x, y: box.getBBox().y + y };
// how much to move the shape
var offset = {
x: target_xy.x - shape_xy.x,
y: target_xy.y - shape_xy.y
}
shape.transform("T" + offset.x + "," + offset.y + " S" + s + "," + s + " " + target_xy.x + "," + target_xy.y);
}
moveShapeTo(box, line, 30, 50, 4);
jsfiddle
この関数に指定する座標は、形状の境界ボックスの左上隅を参照することに注意してください。