使用JQuery操作SVG

使用JQuery操作SVG

1.注意事项

1.要用服务器访问，用文件访问是不能使用getSVGDocument()得到SVG的Document的。

2.可以在HTML中直接写入SVG代码,也可以使用iframe标签和object标签,以及embed标签引入SVG文件

3.将操作SVG的代码放在$().load方法中，如果只是

2.实际使用

<embed id='embedSvg' src="../maps/东莞地图SVG/东莞.svg" type="image/svg+xml" />

$(function(){}) [也就是window.ready] (可能会存在svg的dom没加载好的问题)
$(window).load(function() {} (代码放在load方法中)

let svgDOC = document.getElementById('embedSvg').getSVGDocument(); let svgObj = $(svgDOC).children('svg')[0];
1.使用getSVGDocument可以得到svg的doc。
2.然后得到子节点svgObj

接下来就能使用svgObj找到子节点了

$(svgObj).children(‘path’).on(‘click’, function() {});