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

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

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

看到这个post：

'setAttributeNS()' 不会将名称转换为小写。

Answer 2

您应该使用 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 3

您需要创建一个实际的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 4

它在 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）