Разделить/разрезать SVG в коробках, RaphaelJS

Question

Я использую RaphaelJS, чтобы нарисовать 4 коробки внутри холста.

var paper = new Raphael(document.getElementById('canvas_container'), 512, 256); 

var rectangle = paper.rect(50, 50, 50, 50), 
    rectangle2 = paper.rect(400, 50, 50, 50); 
    rectangle3 = paper.rect(50, 200, 50, 50); 
    rectangle4 = paper.rect(400, 200, 50, 50); 

rectangle2.attr("fill", "red"); 
rectangle3.attr("fill", "green"); 
rectangle4.attr("fill", "blue"); 

jsfiddle: http://jsfiddle.net/SFRWj/1/

-

Моя проблема: Я хочу, чтобы петли и вырезать/разделить мой холст в SVG 4: в левом верхнем углу, в правом верхнем углу, внизу слева, внизу справа Назначение : Я хочу иметь 4 отдельных элемента, которые потом могу попытаться преобразовать в png или base64 или просто сделать с ними что-то.

любые идеи?

---

UPDATE 1:

с двумя for петель и

paper.setViewBox(i*viewStep,j*viewStep,128,128,false);

я получил что-то вроде этого: http://jsfiddle.net/SFRWj/3/

---

Answer 1

Вот пример с svg.js, но вам с вероятно достичь того же Рафаэля:

var src = 'http://distilleryimage11.s3.amazonaws.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg' 

/* create canvases */ 
var draw1 = SVG('canvas1').viewbox(0,0,75,75) 
var draw2 = SVG('canvas2').viewbox(75,0,75,75) 
var draw3 = SVG('canvas3').viewbox(0,75,75,75) 
var draw4 = SVG('canvas4').viewbox(75,75,75,75) 

/* draw image */ 
var image = draw1.image(src).size(150,150) 

/* clone image to other canvases */ 
draw2.add(image.clone()) 
draw3.add(image.clone()) 
draw4.add(image.clone()) 

http://jsfiddle.net/wout/rgzG6/

Этот пример в основном созданы четыре SVG холсты, клоны контента из первых в других полотнах и устанавливает ViewBox для каждого из них. Если у вас есть несколько элементов, вы можете рассмотреть возможность размещения всего в группе до их клонирования.