DOM эквивалент для элементов SVG

Question

Я пытаюсь создать теги под SVG, используя DOM, и мне нужна была помощь на том же. Я не могу понять, как установить атрибуты для «прямых» тегов. Ниже приведен снимок HTML-кода. Я хотел бы создать то же самое с помощью DOM.

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width ="1500" height="1500"> 
     <text x="0" y="15" fill="black">AISLE A</text> 

     <rect x=10 y=45 rx="10" ry="10" width="40" height="40" style="fill:red;stroke:black;opacity:0.5" onmouseover="this.style.stroke = 'black'; this.style['stroke-width'] = 5;" onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"> 
      <title id="title1"> 
      Location: FP-A-02</br>Replenrate: xx%</br>PickRate: yy% 
      </title> 
      </rect> 

      <rect x=60 y=45 rx="10" ry="10" width="40" height="40" style="fill:red;stroke:black;opacity:0.5" onmouseover="this.style.stroke = 'black'; this.style['stroke-width'] = 5;" onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"> 
      <title id="title2"> 
      Location: FP-A-02</br>Replenrate: xx%</br>PickRate: yy% 
      </title> 
      </rect> 
    <text x="0" y="15" fill="black">AISLE B</text>  
      <rect x=110 y=45 rx="10" ry="10" width="40" height="40" style="fill:red;stroke:black;opacity:0.5" onmouseover="this.style.stroke = 'black'; this.style['stroke-width'] = 5;" onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"> 
      <title id="title3"> 
      Location: FP-A-02</br>Replenrate: xx%</br>PickRate: yy% 
      </title> 
      </rect> 

      <rect x=160 y=45 rx="10" ry="10" width="40" height="40" style="fill:red;stroke:black;opacity:0.5" onmouseover="this.style.stroke = 'black'; this.style['stroke-width'] = 5;" onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"> 
      <title id="title4"> 
      Location: FP-A-02</br>Replenrate: xx%</br>PickRate: yy% 
      </title> 
      </rect> 
<svg> 

Пожалуйста, обратите внимание, что есть 2 проходы А и В. Я бы создание 20 прямоугольников в пределах каждых проходов. Создание их вручную не является оптимизированным способом и, следовательно, хочет использовать DOM для создания элементов.

Answer 1

Вы можете обрабатывать теги svg, как и любой другой элемент DOM. Например:

// Create the SVG from scratch or get one already on your DOM 
// For sake of example, here we create one. 
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
// Same logic for the inner tags 
var rect = document.createElementNS(svg.namespaceURI, 'rect'); 

// Once you have reference to the element, setting attributes is simple. 
// https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute 
rect.setAttribute('x', 0); 
// ... 

// At the end you append all your child elements to the parent 
svg.appendChild(rect); 
// ...