制作一个矩形，知道边的两条垂直线(路径元素）的位置

Make a rectangle knowing the position of the two vertical lines of the sides (path elements)

本文关键字：两条 垂直线 元素 路径 位置 一个      更新时间：2023-09-26

我想做一个矩形，知道边的两条垂直线的位置。这些行的实现方式如下：

<path fill="#000000" id="Measure1" d="M159.688,119.75L159.688,88.75L160.28799999999998,88.75L160.28799999999998,119.75ZM162.688,119.75L162.688,88.75L163.28799999999998,88.75L163.28799999999998,119.75Z"/>
<path fill="#000000" id="Measure2" d="M260.168,119.75L260.168,88.75L260.76800000000003,88.75L260.76800000000003,119.75Z"/>

使用此代码，我有一个矩形：

<path d="M10 80 H 110 V 130 H   10 V  80 Z" fill="red" />

但是我可以使用两条线的坐标来使用它们来为我的矩形提供位置吗？

谢谢！

你可以

用 SVG 的原生getBBox()获取线条的边界框，然后计算位置，这里是一个基本的例子：

var path1 = document.getElementById("Measure1");
var path2 = document.getElementById("Measure2");
var xmlns = "http://www.w3.org/2000/svg";
var svg = document.querySelector("svg");
var bbox1 = path1.getBBox();
var bbox2 = path2.getBBox();
var x = bbox1.x + bbox1.width;
var y =  bbox1.y;
var width = bbox2.x - x;
var height =  bbox1.height;
var rect = document.createElementNS(xmlns, "rect");
rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", width);
rect.setAttribute("height", height);
rect.setAttribute("fill", "red");
svg.appendChild(rect);

您可以在此处查看结果：

http://jsfiddle.net/3rSYV/

相关文章：