在盒子中分割/切割 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 或只是对它们做一些事情。

有什么想法吗？

---

更新 1：

有两个 for 循环和

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

我得到了这样的东西：http://jsfiddle.net/SFRWj/3/

---

Answer 1

下面是 svg.js 的示例，但您也可以使用 Raphael 实现同样的效果：

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 画布，将内容从第一个画布克隆到其他画布，并为每个画布设置一个视图框。如果您有多个元素，您可以考虑在克隆它们之前将所有元素放在一个组中。