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

Question

我想将包含 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>

Answer 1

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>