我尝试使用JavaScript在html中动态创建svg路径元素。
我想在<defs>
元素中设置路径,以后可以在<use>
xlink:href元素中重用。
创建后(在示例中按下按钮)屏幕的下半部分保持为空。
相同的html,静态放置时工作正常。 (按钮上方)
在Chrome / Firefox中进行检查显示,在动态操作的dom中,#shadow-root(node?)在动态创建的部分中为空,而在静态部分中保存路径的副本。
有没有办法触发手动刷新,我错过了? 这通常是一种禁止的方式吗? 我在代码中犯了错误吗?
<!DOCTYPE html>
<html>
<script>
function test() {
component = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
component.classList.add("component");
component.style.left = '0px';
component.style.top = '0px';
component.style.width = '800px';
component.style.height = '400px';
component.style.position = "absolute";
document.getElementById("theConnections").appendChild(component);
defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
component.appendChild(defs);
pathdef = document.createElementNS('http://www.w3.org/2000/svg', 'path');
pathdef.id = "conn1";
pathdef.setAttribute("d", "M264 133 L396 132");
defs.appendChild(pathdef);
path2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
path2.setAttribute("xlink:href", "#conn1");
path2.setAttribute("stroke", "black");
path2.setAttribute("stroke-width", "9");
component.appendChild(path2);
path = document.createElementNS('http://www.w3.org/2000/svg', 'use');
path.setAttribute("xlink:href", "#conn1");
path.setAttribute("stroke", "white");
path.setAttribute("stroke-width", "7");
component.appendChild(path);
}
</script>
<style>
.dooferKasten {
background-color: rgb(82, 69, 50);
}
</style>
<body>
<div style="width:800px; height:400px; position: relative" class="dooferKasten">
<svg class="component" style="left: 0px; top: 0px; width: 800px; height: 400px; position: absolute;">
<defs><path id="conn0" d="M264 133 L396 132"></path></defs>
<use xlink:href="#conn0" stroke="black" stroke-width="9"></use>
<use xlink:href="#conn0" stroke="white" stroke-width="7"></use>
</svg>
</div>
<button onclick="test()">test</button>
<div style="width:800px; height:400px; position: relative" id="theConnections" class="dooferKasten">
</div>
</body>
</html>
感谢Robert Longson。这指向了正确的方向。我读了一篇文章,实际上xlink:href属性属于不同的命名空间。所以我不得不使用'http://www.w3.org/1999/xlink'代替'http://www.w3.org/2000/svg'。所以遵循一般建议总是在我的svg命名空间中使用setAttributeNS ...
并使用null作为非前缀属性...
并使用正确的命名空间,其中该属性属于一个完整的不同命名空间,我的代码看起来像这样:
function test() {
component = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
component.classList.add("component");
component.style.left = '0px';
component.style.top = '0px';
component.style.width = '800px';
component.style.height = '400px';
component.style.position = "absolute";
document.getElementById("theConnections").appendChild(component);
defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
component.appendChild(defs);
pathdef = document.createElementNS('http://www.w3.org/2000/svg', 'path');
pathdef.id = "conn1";
pathdef.setAttributeNS(null, "d", "M264 133 L396 132");
defs.appendChild(pathdef);
path2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
path2.setAttributeNS('http://www.w3.org/1999/xlink', "xlink:href", "#conn1");
path2.setAttributeNS(null, "stroke", "black");
path2.setAttributeNS(null, "stroke-width", "9");
component.appendChild(path2);
path = document.createElementNS('http://www.w3.org/2000/svg', 'use');
path.setAttributeNS('http://www.w3.org/1999/xlink', "xlink:href", "#conn1");
path.setAttributeNS(null, "stroke", "white");
path.setAttributeNS(null, "stroke-width", "7");
component.appendChild(path);
}