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

Question

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

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

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

这不起作用,因为viewBox它区分大小写,如果字母B是小写的,它将不会产生任何影响.

IE只允许这样的情况使用IFlag参数,但是我的目标受众仅限于FireFox和Chrome用户,我没有找到IFlag setAttribute.

有没有一种方法可以在不使用innerHTML和无库javascript的情况下完成这项工作？

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

Answer 1

您需要创建一个实际svg元素.当你这样做时:

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

你实际得到的是一个名为HTML元素svg,而不是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元素,但是您的代码是编程式的,因此无法自动执行.