Javascript SVG元素的DOM等价物
我正在尝试使用DOM在SVG下创建标记,我需要一些相同的帮助。我不知道如何设置“rect”标记的属性。下面是HTML代码的快照。我想使用DOM创建相同的Javascript SVG元素的DOM等价物,javascript,html,dom,svg,Javascript,Html,Dom,Svg,我正在尝试使用DOM在SVG下创建标记,我需要一些相同的帮助。我不知道如何设置“rect”标记的属性。下面是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
<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>
A通道
地点:FP-A-02回复日期:xx%分拣率:yy%
地点:FP-A-02回复日期:xx%分拣率:yy%
B通道
地点:FP-A-02回复日期:xx%分拣率:yy%
地点:FP-A-02回复日期:xx%分拣率:yy%
请注意,有2个通道A和B。我将在每个通道内创建20个矩形。手动创建它们不是一种优化的方法,因此需要使用DOM来创建元素。您可以像处理任何其他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);
// ...
您可以使用D3.js,它专门处理以下内容:)使用D3不太舒服。这本书是非常棒的入门资料,但这一章将帮助你做你想做的事情。:)非常感谢。这很有用。createElement无法创建SVG元素,必须使用CreateLements在SVG命名空间中创建它们。啊,是的!你说得对@RobertLongson。修复了SVG的create元素。谢谢你指出这一点。你也需要用同样的方法修复rect。。。。我一边回答问题一边学习哈哈,谢谢@robertlongshank你们。。我现在就试试这个