Question

我在javascript中创建了一个svg元素，我需要设置一个区分大小写的属性：viewBox。

元素的创建方式如下：var svgElem = document.createElement('svg');

问题是当它通过svgElem.setAttribute("viewBox", "0,0,100,100")设置该属性并附加到DOM时，结果元素显示如下： <svg viewbox="0,0,100,100"></svg>

这不起作用，因为viewBox区分大小写，如果字母B为小写，则不会产生任何影响。

IE allows an IFlag parameter仅适用于此类情况，但我的目标受众仅限于FireFox和Chrome用户，我认为setAttribute没有IFlag。

有没有办法在不使用innerHTML和无库javascript的情况下完成这项工作？

编辑：我也尝试使用点符号但没有成功svg.viewBox = "0,0,100,100"

Answer 1

您需要创建一个实际的svg元素。当你这样做时：

var svg = document.createElement('svg');

您实际获得的是名为svg的HTML元素，而不是SVG元素。这里的关键是SVG实际上根本不是HTML元素，它是一个外来文档根。要正确创建SVG元素，您需要执行

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

具体来说，这会创建一个XML元素，而不是HTML元素。在基本的浏览器案例中，

document.createElement('div')

与

相同

document.createElementNS('http://www.w3.org/1999/xhtml', 'div');

这有很大的不同，因为在HTML中，属性名称不区分大小写，而在XML中，它们是。此外，如果您要将该SVG附加到DOM，它将表现得像div，因为它是一个未知的HTML元素，而不是真正的SVG元素。 HTML解析器非常智能，可以创建外部根节点而不是未知的HTML元素，但您的代码是程序化的，因此无法自动执行。

Answer 2

在Chrome和Firefox中它适用于我。

var  svgns = "http://www.w3.org/2000/svg";

var  svg = document.createElementNS(svgns, "svg");
svg.setAttribute("width", "400");
svg.setAttribute("height", "400");

var  circle = document.createElementNS(svgns, "circle");
circle.setAttribute("cx", "300");
circle.setAttribute("cy", "300");
circle.setAttribute("r", "100");
svg.appendChild(circle);

document.getElementById("container").appendChild(svg);

// Now change the viewBox
svg.setAttribute("viewBox", "200 200 200 200");

<div id="container">
</div>

（注意：根据OP请求更新以从头开始创建SVG）

Answer 3

您应该使用createAttribute创建值，请参阅 Setting attribute value of an element in camelCase using a directive

var div1 = document.createElementNS("http://blabla/svg", "view");
var attr1 = document.createAttribute("viewBox");
attr1.value = "200 200 200 200";
div1.setAttributeNode(attr1);

Answer 4

对于HTMLElement，只需将setAttribute("attrName", "value")更改为setAttributeNs(null,"attrName", "value")即可解决我的问题。

查看此post：

'setAttributeNS（）'不会将名称转换为小写。

如何在javascript生成的元素中设置具有区分大小写的名称的属性

4 个答案: