JavaScript createElement и SVG

Question

JavaScript createElement и SVG

Я хочу создать встроенную графику SVG с использованием Javascript.

Однако, похоже, что функция createElementNS применяет некоторую нормализацию и преобразует все теги в нижний регистр. Это хорошо для HTML, но не для XML / SVG. Я использовал NS http://www.w3.org/2000/svg .

В частности, у меня проблемы с созданием элемента. Поскольку это будет добавлено как, таким образом, не будет работать.

Я провел некоторый поиск, но пока не смог найти решение.

Кто-нибудь знает решение?

Большое спасибо!

document.createElementNS("http://www.w3.org/2000/svg","textPath");

приводит к

]

29

javascript svg capitalization

задан Alexander O'Mara 14 October 2016 в 05:35

1 ответ

Другие вопросы по тегам:

javascript svg capitalization

Похожие вопросы:

score 44 · Accepted Answer

Надеюсь, следующий пример вам поможет:

 function CreateSVG () {var xmlns = "http://www.w3.org/2000/svg"; var boxWidth = 300; var boxHeight = 300; var svgElem = document.createElementNS (xmlns, "svg"); svgElem.setAttributeNS (null, "viewBox", "0 0" + boxWidth + "" + boxHeight); svgElem.setAttributeNS (ноль, «ширина», boxWidth); svgElem.setAttributeNS (ноль, «высота», boxHeight); svgElem.style.display = "блок"; var g = document.createElementNS (xmlns, "g"); svgElem.appendChild (g); g.setAttributeNS (null, 'преобразование', 'матрица (1,0,0, -1,0,300)'); // рисуем линейный градиент var defs = document.createElementNS (xmlns, "defs"); var grad = document.createElementNS (xmlns, "linearGradient"); grad.setAttributeNS (ноль, «идентификатор», «градиент»); grad.setAttributeNS (ноль, «x1», «0%»); grad.setAttributeNS (ноль, «x2», «0%»); град.setAttributeNS (ноль, «y1», «100%»); grad.setAttributeNS (ноль, «y2», «0%»); var stopTop = document.createElementNS (xmlns, «стоп»); stopTop.setAttributeNS (ноль, «смещение», «0%»); stopTop.setAttributeNS (ноль, «стоп-цвет», «# ff0000»); grad.appendChild (stopTop); var stopBottom = document.createElementNS (xmlns, «стоп»); stopBottom.setAttributeNS (ноль, «смещение», «100%»); stopBottom.setAttributeNS (ноль, «стоп-цвет», «# 0000ff»); grad.appendChild (stopBottom); defs.appendChild (град); g.appendChild (по умолчанию); // рисуем границы var coords = "M 0, 0"; coords + = "l 0, 300"; coords + = "l 300, 0"; coords + = "l 0, -300"; coords + = "l -300, 0"; var path = document.createElementNS (xmlns, «путь»); path.setAttributeNS (ноль, 'ход', «# 000000»); path.setAttributeNS (ноль, 'ширина обводки', 10); path.setAttributeNS (ноль, 'переход-линия', "круг"); path.setAttributeNS (ноль, 'd', координаты); path.setAttributeNS (null, 'заполнить', «url (#gradient)»); path.setAttributeNS (ноль, 'непрозрачность', 1.0); g.appendChild (путь); var svgContainer = document.getElementById ("svgContainer"); svgContainer.appendChild (svgElem); }

 #svgContainer {width: 400px; высота: 400 пикселей; цвет фона: # a0a0a0; }