[英]SVG path created with Javascript has no width or height
我正在尝试使用Javascript和SVG以编程方式创建一个圆角。 角创建成功,但是path
始终设置为0宽度和0高度。
如果我复制创建的字符串元素并将其粘贴到文件中,则它可以正常工作,如代码片段第二行所示。
为什么仅以编程方式创建的路径没有宽度和高度? 我想念什么?
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") 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; } 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"; }
<h3>This svg was created using svg string created programatcally.</h3> <svg fill="none" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="top: 22px; left: 510px; width: 10px; height: 10px; z-index: 20001; position: absolute;"> <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> </svg>
( 小提琴 )
使用var corner = document.createElementNS("http://www.w3.org/2000/svg", "svg");
而不是var corner = document.createElement("svg");
为了创建一个新的svg元素,您需要使用document.createElementNS
而不是document.createElement
。 另外,您还需要使用document.createElementNS
创建路径。 corner.innerHTML = '<path class=...
不会做。
const SVG_NS = 'http://www.w3.org/2000/svg'; 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.createElementNS(SVG_NS, 'svg'); corner.setAttributeNS(null,"fill", "red"); corner.setAttribute("class","corner") corner.setAttributeNS(null,"viewBox", "0 0 100 100"); //corner.setAttribute("xmlns", "http://www.w3.org/2000/svg") var path = document.createElementNS(SVG_NS, 'path'); path.setAttributeNS(null,"fill", "rgba(0, 0, 0, .5)"); path.setAttributeNS(null,"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.position = "absolute"; }
svg{border:1px solid} .corner{background-color: red;}
<h3>This svg was created using svg string created programatcally.</h3> <svg fill="none" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="top: 22px; left: 510px; width: 10px; height: 10px; z-index: 20001; position: absolute;"> <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> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.