如何在 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

我在 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 2

您需要创建一个实际的 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 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")，解决了我的问题。

看到这个 :

'setAttributeNS()' doesn't convert the name to lower case.

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

How can I set an Attribute with case-sensitive name in a javascript generated element

html

javascript

svg