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

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

2 个答案: