Javascript 我可以在svg文件上绘制形状吗

我需要在现有svg上动态绘制矩形、圆形等形状。ie当我点击svg时，它应该选择并突出显示svg中的特定路径。然后我要在突出显示的区域上绘制形状。如何实现这一点？

要利用SVG：

var svg_ns = "http://www.w3.org/2000/svg";
var my_svg = document.getElementById('your_svg');

var new_shape = document.createElementNS(svg_ns, 'rect');
new_shape.setAttributeNS(null, 'x', x);
new_shape.setAttributeNS(null, 'y', y);
new_shape.setAttributeNS(null, 'height', '50');
new_shape.setAttributeNS(null, 'width', '50');
new_shape.setAttributeNS(null, 'fill','#00FF00');
my_svg.appendChild(new_shape);

要获取SVG路径，请执行以下操作：

var svg_paths = my_svg.getElementsByTagName("path");
/* Then to hightlight a path : svg_paths[i].stroke='#0000FF' */

您可以在以下位置查看基本形状信息：

---

要实现这一点，需要进行许多操作，例如，在SVG中绘制矩形相当复杂。让我来解释一下：通过单击并在光标下方添加新元素，可以很容易地高亮显示（或着色）元素，但“绘图元素”通常需要某种“通过拖动调整大小”，这有点复杂。使用一些图书馆会有很大帮助

• （单击“简单”以绘制矩形等）
• 如果你想要一个更“原始”的方法

---

您的实际需要是什么？你需要突出显示所选形状？我需要在现有svg的突出显示区域绘制新形状。请发布你迄今为止尝试过的代码。我可以在所选路径上绘制新形状吗？即我需要突出显示的区域作为背景，并在svg背景的顶部绘制新形状。可以吗？谢谢！补充说。盆景还有一个很好的getBoundingBox（）函数，我还没有发现bug。拉斐尔也有类似的观点，但在某些情况下失败了。拉斐尔有很多未修复的虫子，其中一些已经三岁了。