CODEWITHSUNDEEP
javascriptsvg
Jasper R.
Jasper R.

Reputation: 405

Dynamically adding SVG with clipping path

I'm trying to add an SVG path that's clipped, with Javascript, but some of the pieces (specifically, the clipPath) aren't working. What am I doing wrong?

Here's a comparison Codepen: working HTML version on the right, failed .js version on the right.

The relevant code:

var fieldShield = function() {
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("style", "height: 100%; width: 100%; position: absolute;");
    var clipPath = document.createElement("clipPath");
    clipPath.id = "fieldClip";
    svg.appendChild(clipPath);
    var fill = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    fill.id = "fieldFill";
    fill.setAttribute("x", "0");
    fill.setAttribute("y", "0");
    fill.setAttribute("width", "450");
    fill.setAttribute("height", "450");
    clipPath.appendChild(fill);
    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.id = "fieldShield";
    path.setAttribute("d", "m395,20c0.910,57.6 0.857,115 0,173-0.833,55.5-3.60,98.8-28.5,133-29.9,40.8-79.8,70.2-144,99.2-64.2-28.9-114-58.4-144-99.2-24.9-33.9-27.6-77.2-28.5-133-0.857-57.6-0.910-115 0-173z");
    path.setAttribute("style", "stroke: white; stroke-width: 3;");
    svg.appendChild(path);
    var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
    use.className = "divisions";
    use.setAttribute("clip-path", "url('#fieldClip')");
    use.setAttribute("xlink:href", "#fieldShield");
    use.setAttribute("fill", "red");
    svg.appendChild(use);

    console.log(svg);

    document.getElementById("svgHolder").append(svg);
}

Upvotes: 0

Views: 1505

Answers (2)

Kosh
Kosh

Reputation: 18393

The cause of your problem is using deprecated xlink:href attribute on <use>.
Consider using href instead:

var fieldShield = function() {
	var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	svg.setAttribute("style", "height: 100%; width: 100%; position: absolute;");
  
	var clipPath = document.createElement("clipPath");
	clipPath.id = "fieldClip";
	svg.appendChild(clipPath);
  
	var fill = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	fill.id = "fieldFill";
	fill.setAttribute("x", "0");
	fill.setAttribute("y", "0");
	fill.setAttribute("width", "450");
	fill.setAttribute("height", "450");
	clipPath.appendChild(fill);
  
	var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
	path.id = "fieldShield";
	path.setAttribute("d", "m395,20c0.910,57.6 0.857,115 0,173-0.833,55.5-3.60,98.8-28.5,133-29.9,40.8-79.8,70.2-144,99.2-64.2-28.9-114-58.4-144-99.2-24.9-33.9-27.6-77.2-28.5-133-0.857-57.6-0.910-115 0-173z");
	path.setAttribute("style", "stroke: white; stroke-width: 3;");
	svg.appendChild(path);
  
	var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
	use.className = "divisions";
	use.setAttribute("clip-path", "url('#fieldClip')");
	use.setAttribute("href", "#fieldShield");
	use.setAttribute("fill", "red");
	svg.appendChild(use);

//	console.log(svg);

	document.getElementById("svgHolder").append(svg);
}

fieldShield();
body {
  background: #aaa
}
<div id="svgHolder"></div>

Upvotes: 1

MTCoster
MTCoster

Reputation: 6145

You’re already using Document.createElementNS() to correctly namespace the elements, but you also need to use Element.setAttributeNS() when setting namespaced attributes.

In your example, this affects the following line:

use.setAttribute("xlink:href", "#fieldShield");

The browser treats xlink:href as a single plain attribute, not an attribute with a specified namespace. Instead, you should use the NS version of this function to specify the xlink namespace:

use.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#fieldShield");

Upvotes: 1

Related Questions