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

I create a svg element in javascript and I need to set an attribute which is case sensitive: viewBox.

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

The element is created like this: var svgElem = document.createElement('svg');

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

Problem is when it set that attribute via svgElem.setAttribute("viewBox", "0,0,100,100") and append to the DOM, the resulting element shows like this: <svg viewbox="0,0,100,100"></svg>

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

This doesn't work because the viewBox is case sensitive, it will not take any effect if the letter B is lowercase.

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

IE allows an IFlag parameter just for cases like these, however my target audience is restricted to FireFox and Chrome users, which do not have IFlag for setAttribute as far as I could find.

IE允许IFlag参数仅适用于这类情况,但我的目标受众仅限于FireFox和Chrome用户,就我所见,它没有setAttribute的IFlag。

Is there a way of making this work without using innerHTML and no-library javascript?

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

EDIT: I have also tried using dot notation with no success svg.viewBox = "0,0,100,100"

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

3 个解决方案

#1

You need to create an actual svg element. When you do:

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

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

what you are actually getting is an HTML element named svg, not an SVG element. The key here is that SVG is not actually an HTML element at all, it is a foreign document root. To create an SVG element properly, you need to do

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

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

Specifically, this creates an XML element, rather than an HTML element. In the basic browser case,

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

document.createElement('div')

is the same as

是相同的

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

This makes a big difference, because in HTML, attribute names are not case-sensitive, whereas in XML, they are. Also, if you were to append that SVG to the DOM, it would behave like a div since it is an unknown HTML element, rather than a real SVG element. An HTML parser is smart enough to create a foreign root node instead of an unknown HTML element, but your code is programmatic, so it can't do it automatically.

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

#2

It works fine for me in Chrome and Firefox.

它适用于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>

(Note: updated to create the SVG from scratch as per OPs request)

(注意:根据OPs请求更新以从头开始创建SVG)

#3

You should create the value using createAttribute, see Setting attribute value of an element in camelCase using a directive

您应该使用createAttribute创建值,请参阅使用指令设置camelCase中元素的属性值

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

#1