How to add SVG element from String to DOM

Question

I would like to add SVG which includes rect and use tags from a string to the DOM.

I doesn\'t seams to work the way I do.

相关标签:

Answer 1

The SVG element needs to be in the svg namespace i.e. have an xmlns attribute with the appropriate value...

		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>