Question

我正在尝试使用DOM在SVG下创建标签，我需要一些帮助。我无法弄清楚如何为＆＃34; rect＆＃34;设置属性。标签。以下是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>

请注意，有两个AISLES A和B.我将在每个AISLES中创建20个矩形。手动创建它们不是一种优化方式，因此希望使用DOM来创建元素。

Answer 1

您可以像处理任何其他DOM元素一样处理svg标记。例如：

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

与SVG元素等效的DOM

1 个答案: