我应该如何正确使用 setAttribute() 方法？

Question

我有一个 svg 元素，我正在使用 createElement() 方法向其添加一个 rect 元素，然后使用 setAttribute() 方法为其指定宽度和高度。

var svg = document.querySelector("svg");

function addRect(side) { 
  var newRect = document.createElement("rect"); 
  svg.appendChild(newRect);

  var thisRect = svg.lastChild;

  thisRect.setAttribute("width", side);
  thisRect.setAttribute("height", side);
}

addRect("100");

http://codepen.io/stromqvist/pen/YWZpNb

chrome 开发工具中的结果显示 <rect width="100" height="100"></rect>，但矩形没有任何尺寸。

我做错了什么？

Answer 1

创建 SVG 元素时，您将使用 createElementNS 来创建具有限定命名空间的元素，例如 SVG 元素

document.createElementNS("http://www.w3.org/2000/svg", "svg");

对于某些属性，您可以使用 setAttributeNS，但对于宽度和高度等常规属性，setAttribute 应该有效

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

Demo click here

我应该如何正确使用 setAttribute() 方法？

How should I properly use setAttribute() method?

html

javascript

svg

rect

setattribute