Вопрос по svg, javascript – Добавление дочернего пути в SVG с использованием Javascript

23

Хорошего дня,

У меня невероятные трудности при создании пути и его отображении с помощью & quot; appendChild & quot; внутри элемента SVG.

Мне нужно упустить что-то критически простое, поскольку я пролистал спецификации W3C, w3schools.com, различные посты здесь и пытался найти ниндзя в Google различными способами.

Я тестирую в FireFox и Chrome.

У меня есть простой файл SVG, таким образом:

<svg xmlns:svg ... id="fullPageID">
 <image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" />  
 <image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" />
 <script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" />  
</svg>

Сценарий, который я пытаюсь использовать, выглядит следующим образом:

newpath = document.createElementNS("SVG","path");  
newpath.setAttribute("id", "pathIdD");  
newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttribute("stroke", "black");  
newpath.setAttribute("stroke-width", 3);  
newpath.setAttribute("opacity", 1);  
newpath.setAttribute("fill", "none");

document.getElementById("fullPageID").appendChild(newpath);

Я просто хочу сделать что-то простое. Я ошибаюсь, если думаю, что мне не нужно такое сложное решение, как найденное наБиблиотека для создания SVG Path с Javascript??

Спасибо, пожалуйста.

Возможно, вы захотите «Принять»; один из ответов. phils

Ваш Ответ

2   ответа
4

, а не" SVG ". вcreateElementNS вызов.

28

As already pointed out, you have to use the full namespace uri, so in this case:

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

Attributes also need to be set with namespace in mind. The good news is that you can pass in null as the namespace uri, so:

newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");

Кроме того, вот два способа упростить работу с пространством имен svg (при условии, что это отдельный svg, не встроенный в HTML):

To refer to the svg element, instead of giving it an ID, you can use document.rootElement. document.rootElement.getAttribute(null, "xmlns") returns an empty string (while requesting other attributes does work using this method. Instead, use document.rootElement.namespaceURI.

Таким образом, в вашем коде вы можете сделать следующие изменения:

От:

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

Для того, чтобы:

 newpath = document.createElementNS(document.rootElement.namespaceURI,"path");  

И чтобы добавить элемент, вы можете перейти от:

document.getElementById("fullPageID").appendChild(newpath);

чтобы:

document.rootElement.appendChild(newpath);

Таким образом, последний сценарий будет:

newpath = document.createElementNS(document.rootElement.namespaceURI,"path");  
newpath.setAttributeNS(null, "id", "pathIdD");  
newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttributeNS(null, "stroke", "black"); 
newpath.setAttributeNS(null, "stroke-width", 3);  
newpath.setAttributeNS(null, "opacity", 1);  
newpath.setAttributeNS(null, "fill", "none");

document.rootElement.appendChild(newpath);
Подтверждение комментария выше - я всегда успешно использовалsetAttribute(a,b), Работает успешно в Safari, Firefox и Chrome, по крайней мере.
Спасибо за быстрые ответы и подтверждения. Я должен понять намного больше сейчас, так как у меня есть базовое понимание корневого элемента. Мелкие вещи, которые забывают, только находя несколько минут в день, чтобы узнавать что-то новое. Infinite Constructor
№ 2 не правильно; с помощьюsetAttribute(a,b) эквивалентноsetAttributeNS(null,a,b): это работает так же хорошо.
# 2 не является неправильным, поскольку он является «официальным» способ добавить не-HTML атрибут с более новой спецификацией DOM. У меня были проблемы с Chrome, когда атрибут присутствует в исходном инспекторе, но не скомпилирован в стиль. Даже если это работает, это потому, что WebKit и Gecko допускают его совместимость, а не потому, что он действительно эквивалентен. Суть в том, что если вы не хотите, чтобы ваш сценарий ломался в какой-то момент, лучше всего использовать ожидаемый метод, а не тот, который был адаптирован для защиты от устаревших версий. Я уверен, что в какой-то моментcreateElement работал в этих двигателях, а также.

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