javascript - 如何将SVG元素从字符串添加到DOM

我想添加包括rect的SVG，并使用从字符串到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>

最佳答案

SVG元素必须位于svg命名空间中，即具有一个具有适当值的xmlns属性...

		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]);

	<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>