概述
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。
示例代码：
<embed id="mySVG" src="map.svg" type="image/svg+xml" />
<div>x坐标值<input id="xValue"></div>
<div>y坐标值<input id="yValue"></div>
<div>文本内容<input id="iText"></div>
<button id="add">动态添加元素</button>
<script>
var svgDoc = null;
最后
以上就是闪闪板栗为你收集整理的html 动态生成svg直线,SVG 动态添加元素与事件的全部内容，希望文章能够帮你解决html 动态生成svg直线,SVG 动态添加元素与事件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复