Javascript 动态添加带裁剪路径的SVG

我试图添加一个经过剪裁的SVG路径，使用Javascript，但其中一些部分（特别是clipPath）不起作用。我做错了什么

这里有一个比较：右边是工作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);
}

您已经在使用来正确命名元素的名称空间，但在设置名称空间属性时也需要使用

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

use.setAttribute（“xlink:href”，“#fieldShield”）；

浏览器将

xlink:href

视为单个普通属性，而不是具有指定命名空间的属性。相反，您应该使用此函数的

NS

版本来指定

xlink

命名空间：

使用.setAttributeNS（“http://www.w3.org/1999/xlink“，“href”，“#fieldShield”）；

您已经在使用来正确命名元素的名称空间，但是在设置名称空间属性时也需要使用

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

use.setAttribute（“xlink:href”，“#fieldShield”）；

浏览器将

xlink:href

视为单个普通属性，而不是具有指定命名空间的属性。相反，您应该使用此函数的

NS

版本来指定

xlink

命名空间：

使用.setAttributeNS（“http://www.w3.org/1999/xlink“，“href”，“#fieldShield”）；

问题的原因是在

上使用了不推荐使用的属性
考虑使用<代码> HREF < /代码>代替：

var fieldShield=function（）{
var svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
setAttribute（“样式”，“高度：100%；宽度：100%；位置：绝对；”；
var clipPath=document.createElement（“clipPath”）；
clipPath.id=“fieldClip”；
svg.appendChild（clipPath）；
var fill=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
fill.id=“fieldFill”；
fill.setAttribute（“x”，“0”）；
fill.setAttribute（“y”，“0”）；
fill.setAttribute（“宽度”、“450”）；
fill.setAttribute（“高度”、“450”）；
clipPath.appendChild（填充）；
var path=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
path.id=“fieldShield”；
setAttribute（“d”、“m395,20c0.910,57.6 0.857115 0173-0.833,55.5-3.60,98.8-28.5133-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”）；
setAttribute（“样式”，“笔划：白色；笔划宽度：3；”）；
appendChild（路径）；
var use=document.createElements（“http://www.w3.org/2000/svg“，”使用“）；
use.className=“divisions”；
use.setAttribute（“剪辑路径”、“url（'#fieldClip'）”）；
使用.setAttribute（“href”，“#fieldShield”）；
use.setAttribute（“填充”、“红色”）；
appendChild（使用）；
//log（svg）；
document.getElementById（“svgHolder”）.append（svg）；
}
fieldShield（）
正文{
背景：#aaa
}
问题的原因是在
上使用了不推荐使用的属性

考虑使用<代码> HREF < /代码>代替：


var fieldShield=function（）{
var svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
setAttribute（“样式”，“高度：100%；宽度：100%；位置：绝对；”；
var clipPath=document.createElement（“clipPath”）；
clipPath.id=“fieldClip”；
svg.appendChild（clipPath）；
var fill=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
fill.id=“fieldFill”；
fill.setAttribute（“x”，“0”）；
fill.setAttribute（“y”，“0”）；
fill.setAttribute（“宽度”、“450”）；
fill.setAttribute（“高度”、“450”）；
clipPath.appendChild（填充）；
var path=document.createElements（“http://www.w3.org/2000/svg“，”路径“）；
path.id=“fieldShield”；
setAttribute（“d”、“m395,20c0.910,57.6 0.857115 0173-0.833,55.5-3.60,98.8-28.5133-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”）；
setAttribute（“样式”，“笔划：白色；笔划宽度：3；”）；
appendChild（路径）；
var use=document.createElements（“http://www.w3.org/2000/svg“，”使用“）；
use.className=“divisions”；
use.setAttribute（“剪辑路径”、“url（'#fieldClip'）”）；
使用.setAttribute（“href”，“#fieldShield”）；
use.setAttribute（“填充”、“红色”）；
appendChild（使用）；
//log（svg）；
document.getElementById（“svgHolder”）.append（svg）；
}
fieldShield（）
正文{
背景：#aaa
}