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

SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：

svgDoc = document.getElementById("mySVG").getSVGDocument();

然后调用 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;
	var time = null;
	// 动态添加元素
	var addElement = function(x, y, nodeText) {
		// 添加圆形
		var c = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'circle');
		c.setAttribute('cx', x);
		c.setAttribute('cy', y);
		c.r.baseVal.value = 7;
		c.setAttribute('fill', 'red');
		c.addEventListener("click", function() {
			alert('圆形点击测试：' + nodeText);
		c.addEventListener("mouseover", function() {
			console.log('圆形鼠标悬停测试：' + nodeText);
		svgDoc.rootElement.appendChild(c);
		// 添加文本
		var t = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'text');
		t.setAttribute("x", parseInt(x) + 5);
		t.setAttribute("y", parseInt(y) + 10);
		t.setAttribute("font-size", "20");
		t.setAttribute('fill', 'green');
		t.addEventListener("click", function() {
			alert('文本点击测试：' + nodeText);
		t.addEventListener("mouseover", function() {
			console.log('文本鼠标悬停测试：' + nodeText);
		t.innerHTML = nodeText;
		svgDoc.rootElement.appendChild(t);
	// 载入SVG
	var loadSvg = function() {
		svgDoc = document.getElementById("mySVG").getSVGDocument();
		if(svgDoc == null) {
			time = setTimeout("loadSvg()", 300);
		} else {
			clearTimeout(time);
			loadCallback();
	// 载入回调
	var loadCallback = function() {
		console.log("加载完成");
	$(function() {
		// 延迟加载
		setTimeout("loadSvg()", 300);
		// 按钮
		$("#add").click(function() {
			var nodeText = $("#iText").val();
			if(nodeText == "") {
				nodeText = "未输入文本";
			console.log(nodeText);
			addElement($("#xValue").val(), $("#yValue").val(), nodeText);
</script>
                                    在使用 SVG 时，需要使用 appendChild 来添加元素。但是如下的写法是不生效的：
let newElement = document.createElement('rect');
newElement.setAttribute('fill','orange');
newElement.setAttribute('width','200');
newElement.setAttribute('height','200');
document.getElementById('svg-drawing
简短的文档
首先看一下在页面中添加脚本的'index.html'文件的源代码。
 发起群组： var group = new r.group('container',array); 其中：'r' 是 Raphael JS 画布，'container' 是 HTML 元素 ID，其中使用 Raphael JS 创建 SVG，'array' 是 Raphael JS 对象的数组可用方法
group.rotate
group.getAttr
group.clipPath
 group.animate
 在 MIT 许可下获得许可
                                    前边了解到可以使用IText生成PDF文件，但是IText本身不直接支持插入SVG，所以我们要进行一次格式准换，现将SVG文件转换成Image，然后插入Image,达到插入SVG的效果。
  将SVG转换成Image我使用的是batik
  官网：https://xmlgraphics.apache.org/batik/
  Maven包：https://mvnrepos...
                                    maven pom.xml1.82.0.15.5.8org.apache.xmlgraphicsxmlgraphics-commons${xmlgraphics.version}org.apache.xmlgraphicsbatik-svggen${batik.version}org.apache.xmlgraphicsbatik-xml${batik.version}org.apache.xml...
                                    SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：
SVG 快速入门
svgDoc = document.getElementById("...
                                    svgcanvas
 我创建此存储库是因为我的需要一个模拟<canvas>元素。 这个库主要基于gliffy的出色工作：  。
 如果您想要的是干净简单的canvas上下文API，则应使用 。
 主要区别在于：此库还为元素添加了一些模拟API（例如宽度，高度，样式，className，getBoundingClientRect，toDataURL）。
 请注意，此库还添加了一些脏API（例如调试的上下文API调用历史记录，gc一些不可见的元素）。 这些API太脏了，因此我没有提出对这些API的请求。 但是，它们对于我的很有用和必要，因此我将它们保留在我的lib中。
var svgcanvas = new SVGCanvas ( ) ;
svgcanvas . width = 100 ;
var height = svgcanvas . height ;
var ctx = svgca
 这个简单的页面加载一个 SVG 并将其显示在画布上。 每个对象都是可编辑/可拖动的。 作为参考，它还包含 SVG 如何在 IE 中显示的图像。
换行符不渲染到 FabricJS 画布
在第一次鼠标按下/交互之前，文本不会以正确的字体显示
当使用 SVG 文本的左侧/顶部位置创建 IText 时，文本位于屏幕外
                                    大致的流程是这样的：实现这个需求是首先通过一个工具（drawio）去自定义绘制图形，然后导出一个svg格式的文件，后端搞了一下drawio工具的源码，在导出的时候，为绘制的图形上每个节点都去绑定了一个id（具体是怎么搞得我一个前端也不是太清楚），最后导出，然后前端需要去加载svg，然后每个节点都会有对应的数据（就是根据绑定的id去获取），然后有些节点上还可能有图片，还需要替换，还可能为每个节点去绑定事件做一些事情。然后还使用了d3实现了让svg可以缩放拖拽。大概是这个亚子
先上一张自己测试用的svg