JavaScript生成的SVG圆角路径宽高为0，复制代码可正常显示求原因

这个问题的核心原因是你在通过innerHTML插入path时，使用了转义的HTML实体（<和>），导致浏览器没有将这段内容解析为真正的SVG <path>元素，而是当成了普通文本节点。

具体原因拆解 #

• 当你执行corner.innerHTML = '<path...>'时，浏览器会把<和>解析成<和>字符，作为纯文本插入到SVG中，而不是创建一个可渲染的SVG path元素。这就意味着你的SVG内部没有实际的图形内容，即使你设置了SVG的宽高样式，也看不到预期的圆角效果，表现为"无有效宽高"。
• 而当你复制粘贴到文件时，这些转义实体被还原成了真正的标签，浏览器能正确识别并解析path元素，所以显示正常。

修复方案 #

你有两种简单的修复方式：

方案1：使用命名空间创建path元素（推荐，更符合DOM操作规范）

SVG元素属于特定的XML命名空间，创建其子元素时需要用createElementNS指定命名空间，避免解析问题：

var cornerTopLeft = createCorner("top-left");
applyCornerStyles.call(cornerTopLeft, 0, 0, 10);
var body = document.getElementsByTagName("body")[0];
body.appendChild(cornerTopLeft);

function createCorner(cornerPosition) {
 var corner = document.createElement("svg");
 corner.setAttribute("fill", "red");
 corner.setAttribute("style", "width:10px;height:10px;background-color: red;");
 corner.setAttribute("viewBox", "0 0 100 100");
 corner.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 
 // 创建SVG命名空间下的path元素
 const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
 path.setAttribute("class", "");
 path.setAttribute("style", "background-color: rgba(0, 0, 0, .5);fill: rgba(0, 0, 0, .5);");
 path.setAttribute("d", "M100 0 ,Q 0 0 0 100, L0 0, Z");
 corner.appendChild(path);
 
 return corner;
}

function applyCornerStyles(top, left, size) {
 this.style.top = top + "px";
 this.style.left = left + "px";
 this.style.width = size + "px";
 this.style.height = size + "px";
 this.style.zIndex = "20002";
 this.style.position = "absolute";
}

方案2：直接使用未转义的标签设置innerHTML

如果坚持用innerHTML，直接写入正常的SVG标签即可，不需要转义，因为SVG元素的innerHTML会在SVG命名空间下解析内容：

function createCorner(cornerPosition) {
 var corner = document.createElement("svg");
 corner.setAttribute("fill", "red");
 corner.setAttribute("style", "width:10px;height:10px;background-color: red;");
 corner.setAttribute("viewBox", "0 0 100 100");
 corner.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 // 去掉转义实体，直接写path标签
 corner.innerHTML = '<path class="" style="background-color: rgba(0, 0, 0, .5);fill: rgba(0, 0, 0, .5);" d="M100 0 ,Q 0 0 0 100, L0 0, Z"></path>';
 return corner;
}

额外说明 #

现代浏览器中，用document.createElement("svg")创建SVG元素是可行的，但创建SVG的子元素（如path、circle等）时，必须使用createElementNS并指定http://www.w3.org/2000/svg命名空间，否则这些元素会被当成HTML元素处理，无法正常渲染。

内容的提问来源于stack exchange，提问作者potato