如何使用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

我希望我能理解你的要求。

如果您想获得元素的边界，可以使用getBoundingClientRect()函数进行javascript

前：

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

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

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

Answer 2

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

1. 在mouseenter（）<rect>上，使用4 <line>概述该框并将其覆盖在＆lt; rect＆gt;`上。
2. 将mousedown()和mousemove()事件监听器附加到所有4行，这样您就可以实际点击它们并拖动它们。
3. 每当拖动一条边时，更新<rect> x，y，宽度和高度值。
4. 在mouseleave（）上，销毁这4行并删除事件侦听器。

这会跳过哪个边缘离鼠标最近的计算。

Snap SVG或RaphaelJS可用于实现此UI，为您节省一些低级编码。