Как я могу установить атрибут с именем, чувствительным к регистру, в созданном 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()' не преобразует имя в нижний регистр.