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

Question

我是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是一个静态链接列表，在节点中没有值。现在这方面有两个问题：

• 如何使这个链接列表动态化？
• 是否有一种方法可以在矩形中写入文本，然后在矩形中定位文本？

小提琴：http://jsfiddle.net/PMxc8/

编辑: jquery是个好主意吗？

谢谢

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]);
                        }
                }

//usage//

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元素。