javascript - 动态添加带有剪切路径的 SVG

Question

我正在尝试使用 Javascript 添加一个经过剪辑的 SVG 路径，但某些部分(特别是 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>