如何使用JavaScript获取SVG中rect标签的边界值

Question

我正在使用SVG编辑器2.7版本，在这里我需要使用JavaScript在SVG中选择矩形的单个边界值。

 <svg width="9000" height="100" style="border:1px solid black"> <rect x="9000" y="0" height="100" width="200"></rect> </svg> 

我的矩形得到此选定的工具。但是我需要选择矩形的各个角，如下图所示

在svg中，编辑文件包含mousedown，mousemove和mouseup事件。这里我使用GETBBOX()函数获取边界值。 但是我需要像上面的图像2那样分割边界进行选择。这里正在处理mouseover事件，以获取svg中矩形的边界。 但我没有实现。 请为此指导我或将我拖入正确的道路。

var mouseOver = function(evt) {
        evt.preventDefault();
        var root_sctm = $('#svgcontent g')[0].getScreenCTM().inverse();
        var pt = svgedit.math.transformPoint( evt.pageX, evt.pageY, root_sctm ),
        mouse_x = pt.x * current_zoom,
        mouse_y = pt.y * current_zoom;
        var x = mouse_x / current_zoom,
        y = mouse_y / current_zoom,
        mouse_target = getMouseTarget(evt);
        mouse_target =selectedElements[0];
    switch (current_mode) {

            case 'rect':
                var test =selectedElements[0].getBBox();
                console.log(test);
            break;
    }

Answer 1

我希望我能很好地理解你的要求。

如果要获取元素的边界，可以对JavaScript使用getBoundingClientRect()函数

例如：

 document.getElementsByTagName('rect')[0].getBoundingClientRect()
 document.getElementsByTagName('rect')[1].getBoundingClientRect()

这将为您提供width ， height ， left ， top ， bottom和right值

如果您想选择矩形的边距，我认为这是不可能的，您必须使用svg-lines建立矩形

Answer 2

这是一个UI问题，不是编码问题。

1. 在mouseenter（） <rect> ，使用4 <line>勾画出框的轮廓，并将其覆盖在<rect>`上。
2. 将mousedown()和mousemove()事件侦听器附加到所有4行，因此您实际上可以单击它们并在周围拖动它们。
3. 每当拖动一条边时，更新<rect> x，y，宽度和高度值。
4. 在mouseleave（）上，销毁这4行并删除事件侦听器。

这将跳过计算哪个边缘最接近鼠标的计算。

可以使用Snap SVG或RaphaelJS来实现此UI，从而节省了一些底层编码。