Добавление дочернего элемента пути в SVG с помощью Javascript

Добрый день,

У меня возникли невероятные трудности при создании пути и его отображении с помощью "appendChild" в элементе 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>

script Я пытаюсь использовать выглядит так:

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-пути с помощью Javascript??

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

Ответы

Ответ 1

Есть две проблемы:

  • Как уже указывалось, вы должны использовать полное пространство имен uri, поэтому в этом случае:

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

  • Атрибуты также должны быть заданы с учетом пространства имен. Хорошей новостью является то, что вы можете передать null в качестве пространства имен uri, поэтому:

    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):

  • Чтобы ссылаться на элемент svg, вместо указания идентификатора, вы можете использовать document.rootElement.
  • document.rootElement.getAttribute(null, "xmlns") возвращает пустую строку (при запросе других атрибутов работает с использованием этого метода. Вместо этого используйте document.rootElement.namespaceURI.

Итак, в вашем коде вы можете сделать следующие перезаписи:

From:

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

To:

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

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

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

в

document.rootElement.appendChild(newpath);

Таким образом, окончательный script будет:

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);

Ответ 2

Пространство имен должно быть "http://www.w3.org/2000/svg", а не "SVG" в вызове createElementNS.