javascript - 使用 svg 绘制链接列表 - jquery svg

Question

我是 svg 的新手，所以我不确定如何实现，因为我想使用 svg 动态地向用户呈现不同的数据结构。我已经尝试将链表作为:

 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">

                    <g>
                  <title>Layer 1</title>
                  <path id="svg_1" d="m92,60l131,0l0,49l-131,0l0,-49z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#FF0000"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_4" y="93" x="179" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
                  <line id="svg_5" y2="108" x2="163" y1="60" x1="163" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_6" y="84" x="109" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_7" y="86" x="138" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_8" y="106" x="135" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_9" y="21" x="-532" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_10" y="101" x="140" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_11" y="103" x="121" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
                  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_12" y="106" x="473" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#FF0000"/>
                  <rect id="svg_13" height="52" width="122" y="58" x="283" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#FF0000"/>
                  <line id="svg_14" y2="109" x2="358" y1="60" x1="357" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
                  <line id="svg_18" y2="103" x2="360" y1="65" x1="401" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
                  <line id="svg_19" y2="101" x2="403" y1="66" x1="357" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
                  <line id="svg_21" y2="82" x2="281" y1="82" x1="222" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
                  <path id="svg_24" d="m258,61l24,21l-23,26l-1,-47z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#bfbfbf"/>
                  <path id="svg_25" d="m258,60" opacity="0.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#FF0000"/>
                 </g>   
 </svg>

上面的svg是一个静态链表，节点中没有值。现在有两个问题:

• 如何使这个链表动态化？
• 有没有办法在矩形中写入文本，然后将文本定位在矩形中

fiddle :http://jsfiddle.net/PMxc8/

编辑:jquery svg 是个好主意吗？

谢谢

Answer 1

为了动态生成 svg，您可以使用 JavaScript 创建 svg 元素。检查以下功能。他们将动态创建 svg 元素。

var SVG_NAMESPACE_URI = 'http://www.w3.org/2000/svg';

function createNode (type, attributes) {
                        var node = document.createElementNS(SVG_NAMESPACE_URI, type);
                        if (type === 'image')
                                attributes.preserveAspectRatio = 'none';
                        if (typeof attributes !== undefined)
                                setAttributes(node, attributes);
                        return node
                }

function setAttributes(el, attributes) {
                        for (var attribute in attributes) {
                                if (attributes[attribute] != null)
                                        el.setAttribute(attribute, attributes[attribute]);
                        }
                }

//用法//

var path1 =createNode('path',{
id:'svg_1',
d:'m92,60l131,0l0,49l-131,0l0,-49z',
'stroke-width':"5",
 stroke:"#000000",
fill:"#FF0000"
});

现在你得到了路径，把它附加到主 svg 上。喜欢

document.getElementsByTagName('svg')[0].appendChild(path1);

类似地逐一创建其他svg元素。