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

Question

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

Answer 1

在 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' */

您可以在以下位置查看基本形状信息： http ://www.w3.org/TR/SVG/shapes.html

Answer 2

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

• http://fabricjs.com/kitchensink/（单击简单绘制矩形等）
• http://raphaeljs.com/如果您想要更“原始”的方法。
• http://demos.bonsaijs.org/demos/draggable-shapes/index.html