Как я могу установить атрибут с именем, чувствительным к регистру, в созданном javascript элементе

Я создаю элемент svg в javascript, и мне нужно установить атрибут, чувствительный к регистру: viewBox.

Элемент создается следующим образом: var svgElem = document.createElement('svg');

Проблема заключается в том, когда он устанавливает этот атрибут через svgElem.setAttribute("viewBox", "0,0,100,100") и присоединяется к DOM, результирующий элемент выглядит следующим образом: <svg viewbox="0,0,100,100"></svg>

Это не работает, потому что viewBox чувствителен к регистру, это не будет иметь никакого эффекта, если буква B имеет строчные буквы.

IE разрешает параметр IFlag только для таких случаев, однако моя целевая аудитория ограничена пользователями FireFox и Chrome, у которых нет IFlag для setAttribute, насколько я мог найти.

Есть ли способ сделать эту работу без использования innerHTML и без библиотеки javascript?

EDIT: Я также попытался использовать точечную нотацию без успеха svg.viewBox = "0,0,100,100"

Ответ 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 достаточно умен, чтобы создать внешний корень node вместо неизвестного элемента HTML, но ваш код является программным, поэтому он не может сделать это автоматически.

Ответ 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>

Ответ 3

Вы должны создать значение, используя createAttribute, см. Установка значения атрибута элемента в camelCase с помощью директивы

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

Ответ 4

для HTMLElement просто измените setAttribute("attrName", "value") на setAttributeNs(null,"attrName", "value") решить мою проблему.

посмотреть это сообщение:

'setAttributeNS()' не преобразует имя в нижний регистр.