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 dev工具的结果显示<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（）方法？

1 个答案: