如何将SVG元素从String添加到DOM

Question

我想添加SVG，其中包括rect和从字符串中使用标签到DOM。

我没有按照我的方式工作。

		var documentAsString =
		'<?xml version="1.0" encoding="UTF-8"?>\
			<document xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\
				<svg id="container" >\
					<g xmlns:xlink="http://www.w3.org/1999/xlink">\
						<rect x="50" y="50" width="50" height="50" fill="red"/>\
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="200" y="50" fill="blue"></use>\
					</g>\
				</svg>\
			</document>\
		';
		
		var newDocument = (new DOMParser()).parseFromString(documentAsString, "text/xml");
		var container = newDocument.getElementById("container");
		var useContainer = document.getElementById('use-container');

		useContainer.removeChild(useContainer.firstElementChild);
		useContainer.appendChild(container.getElementsByTagName('g')[0]);

	<svg>
		<defs>
			<g id="shape">
				<rect x="50" y="50" width="50" height="50" />
				<circle cx="50" cy="50" r="50" />
			</g>
		</defs>

		<use xlink:href="#shape" x="50" y="50" />
		<g id="use-container" xmlns:xlink="http://www.w3.org/1999/xlink">
			<rect x="10" y="10" width="50" height="50" fill="red"></rect>
		</g>
	</svg>

Answer 1

SVG元素需要位于svg名称空间中，即具有适当值的xmlns属性...

＆＃13;

＆＃13;

		var documentAsString =
		'<?xml version="1.0" encoding="UTF-8"?>\
			<document xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">\
				<svg xmlns="http://www.w3.org/2000/svg" id="container" >\
					<g xmlns:xlink="http://www.w3.org/1999/xlink">\
						<rect x="50" y="50" width="50" height="50" fill="red"/>\
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="200" y="50" fill="blue"></use>\
					</g>\
				</svg>\
			</document>\
		';
		
		var newDocument = (new DOMParser()).parseFromString(documentAsString, "text/xml");
		var container = newDocument.getElementById("container");
		var useContainer = document.getElementById('use-container');

		useContainer.removeChild(useContainer.firstElementChild);
		useContainer.appendChild(container.getElementsByTagName('g')[0]);

＆＃13;

	<svg>
		<defs>
			<g id="shape">
				<rect x="50" y="50" width="50" height="50" />
				<circle cx="50" cy="50" r="50" />
			</g>
		</defs>

		<use xlink:href="#shape" x="50" y="50" />
		<g id="use-container" xmlns:xlink="http://www.w3.org/1999/xlink">
			<rect x="10" y="10" width="50" height="50" fill="red"></rect>
		</g>
	</svg>

＆＃13;

＆＃13;

＆＃13;