CODEWITHSUNDEEP
javascriptsvg
Charles
Charles

Reputation: 11796

How to add SVG element from String to DOM

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.

		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>

Upvotes: 2

Views: 1097

Answers (1)

Robert Longson
Robert Longson

Reputation: 124229

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>

Upvotes: 3

Related Questions