我想在SVG下使用DOM创建标签,我需要一些帮助。我无法弄清楚如何设置“rect”标签的属性。以下是HTML代码的快照。我想创建使用DOM的相同。DOM对应的SVG元素
<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 AISLES A和B.我会创建每个AISLES内20米的矩形。手动创建它们不是一种优化的方式,因此希望使用DOM来创建元素。
您可以使用D3.js,它专注于这个东西:) –
不与D3舒适。是否有任何链接,我可以参考和做到这一点 – maverick
http://chimera.labs.oreilly.com/books/1230000000345/ch03.html这整本书是真棒来源开始,但这个特定的章节将帮助你做你想要做的事情。 :) –