html 动态生成svg直线,SVG 动态添加元素与事件

107 阅读 0 评论 71 点赞

我是靠谱客的博主闪闪板栗，这篇文章主要介绍html 动态生成svg直线,SVG 动态添加元素与事件，现在分享给大家，希望可以做个参考。

SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：

SVG 快速入门

svgDoc = document.getElementById("mySVG").getSVGDocument();其中mySVG为SVG主体的id。注意需要在SVG完全加载完成后才可获取，否则获取到的是null。

然后调用svgDoc. createElementNS()函数即可创建SVG元素，为创建的元素进行属性设置，

并绑定事件监听器。最后调用svgDoc.rootElement.appendChild()函数来将创建的元素添加给svgDoc。

示例代码：

<button id="add">动态添加元素</button>

var svgDoc = null;