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内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复