我是 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 是个好主意吗?
谢谢
最佳答案
为了动态生成 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元素。
关于javascript - 使用 svg 绘制链接列表 - jquery svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21452243/