如何在点击事件上在 SVG 上绘制矩形？

【问题标题】：How to draw rectangles on SVG on click event?如何在点击事件上在 SVG 上绘制矩形？
【发布时间】：2015-04-06 10:30:23
【问题描述】：

我在我的应用程序中使用raphael js。在这里，我需要在拉斐尔纸的点击点上绘制一个小矩形。我需要用一条线连接这些矩形。任何人都可以对此进行演示。我正在添加示例演示。请更新。

我的演示： HERE

var paper = Raphael("editor", 635,500),
        canvas= document.getElementById('editor').style.backgroundColor='gray';

现在我需要在点击拉斐尔纸上绘制一些小矩形并将它们用一条线连接起来。

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

这应该可以解决问题； http://jsfiddle.net/9dsgcv1c/1/

var paper = Raphael("editor", 635,500),
canvas= document.getElementById('editor').style.backgroundColor='gray';

var offsetx = paper.canvas.offsetLeft;
var offsety = paper.canvas.offsetTop;

var prevRect = null;
var rWidth = 50;

paper.canvas.onmousedown = function(e) {
    var posX = e.pageX-offsetx;
    var posY = e.pageY-offsety;

    var rectX = posX - (rWidth/2)
    var rectY = posY - (rWidth/2)
    var c = paper.rect(rectX, rectY, rWidth, rWidth).attr({fill:"#fff"});

    if(prevRect) {
        var p = "M"+prevRect.x +" " +prevRect.y +"L"+posX+" "+posY
        var line = paper.path(p);
    }

    prevRect = {x: posX, y:posY};
}

<b>Click on CAMVAS to draw rectangle</b>
<div  id="editor"></div>

【讨论】：