动态添加带剪切路径的SVG

Posted 2021-03-28

我正在尝试使用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);
}

答案

问题的原因是在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>

另一答案

您已经使用Document.createElementNS()正确地命名元素，但是在设置命名空间属性时还需要使用Element.setAttributeNS()。

在您的示例中，这会影响以下行：

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

浏览器将xlink:href视为单个普通属性，而不是具有指定命名空间的属性。相反，您应该使用此函数的NS版本来指定xlink名称空间：

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

以上是关于动态添加带剪切路径的SVG的主要内容，如果未能解决你的问题，请参考以下文章

WPF 动态添加带样式按钮

SVG 剪切路径缩放

为啥这个 SVG 投影过滤器在路径很短时会剪切路径？

UITableViewCell如何添加带圆角的实心边框

在舞台内添加带参数的构建？

css 添加带权重的自定义字体