Динамическое добавление SVG с обтравочным контуром

Question

Я пытаюсь добавить обрезанный путь SVG с помощью Javascript, но некоторые части (в частности, clipPath) не работают.Что я делаю не так?

Вот сравнение Codepen : рабочая версия HTML справа, неудачная версия .js справа.

Соответствующий код:

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

Answer 1

Причиной вашей проблемы является использование устаревшего атрибута xlink:href на <use>.
Попробуйте вместо этого использовать href:

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>

Answer 2

Вы уже используете Document.createElementNS() для правильного пространства имен элементов, но вам также необходимо использовать Element.setAttributeNS() при настройке атрибутов пространства имен.

InВ вашем примере это влияет на следующую строку:

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

Браузер обрабатывает xlink:href как один простой атрибут, а не атрибут с указанным пространством имен.Вместо этого вам следует использовать NS версию этой функции, чтобы указать пространство имен xlink:

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