我目前正在开发一个涉及构建动态图的元素，并正在考虑使用 SVG 来实现此目的。
基于此，我希望看看我所追求的目标是否真的可以通过 SVG 实现。
1) 使用 JavaScript 和 json，是否可以根据我的 json 数据在 HTML 页面中动态构建 SVG 图表？
基本上，我想在页面内构建一个矩形框，其中我可以将 1 到 10 条 svg 行作为左侧矩形框的输入。要确定实际出现的行数，将来 self 的 json 对象。
如上所述，这是否可能？如果可以，如何设置来绘制内联 svg 图？
2)同样，使用 JavaScript，是否可以在这些 svg 行上放置超链接标签，同样基于 json 对象中的信息？
我开始使用静态内联 SVG，但不确定如何使用 javascript 来构建它，以掩盖我上面的两点，即:
<body>
<h1>My SVG Test</h1><hr/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="465" y="90" fill="red">Heading One</text>
<image x="100" y="110" width="50%" height="50%"
xlink:href="http://my-image.com/myimg.jpg" />
<line x1="25" y1="80" x2="350" y2="80" style="stroke: #000000; stroke-width: 2;"/>
</svg>
</body>
最佳答案
您可以使用Snap轻松创建您正在寻找的内容。在下面的代码片段中，我添加了元素的所有必需属性和类型，并使用 .el()创建一个 svg 元素
el 的语法是
Paper.el(name,attr)
Name 是您要创建的元素，例如线、圆、路径等，attr 是您要添加的属性。在下面的数据中，我通过指定它们的属性创建了两条线和一个圆。我还添加了填充和描边
var data = [
{
type:"line",
attrs:{
x1:0,
x2:0,
y1:0,
y2:100,
stroke:"black",
"stroke-width":"5"
}
},
{
type:"line",
attrs:{
x1:100,
x2:100,
y1:0,
y2:100,
stroke:"black",
"stroke-width":"5"
}
},
{
type:"circle",
attrs:{
cx:50,
cy:50,
r:40,
fill:"orange",
}
}
]
var s = Snap("svg");
for(var x=0;x<data.length;x++){
s.el(data[x].type).attr(data[x].attrs);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg width="500" height="500" viewbox="0 0 100 100"></svg>添加链接有点困难和复杂，因为您必须将子 text 元素附加到 a。所以我稍微改变了我的代码。
在下面的代码片段中，我向 json 数据添加了一个名为“parent”的新键。然后将 parent:true 设置为那些有子元素的元素，并运行另一个循环将子元素附加到父元素
var data = [{
type: "line",
parent: false, //is false because it has no child elements
attrs: {
x1: 0,
x2: 0,
y1: 0,
y2: 100,
stroke: "black",
"stroke-width": "5"
}
}, {
type: "line",
parent: false,
attrs: {
x1: 100,
x2: 100,
y1: 0,
y2: 100,
stroke: "black",
"stroke-width": "5"
}
}, {
type: "circle",
parent: false,
attrs: {
cx: 50,
cy: 50,
r: 40,
fill: "orange",
}
}, {
type: "a",
parent: true, // Is true because this has child elements
attrs: {
x: 10,
y: 50,
"xlink:href": "http://snapsvg.io/docs/"
},
childs: [{
type: "text",
attrs: {
x: 10,
y: 50,
text: "Snap is Cool",
}
}]
}, {
type: "image",
parent: false,
attrs: {
"xlink:href": "http://i.imgur.com/5NK0H1e.jpg",
x: 0,
y: 0,
width: 50,
height: 50
}
}]
var s = Snap("svg");
for (var x = 0; x < data.length; x++) {
var p = s.el(data[x].type).attr(data[x].attrs);
if (data[x].parent) { //check if it is true
for (var y = 0; y < data[x].childs.length; y++) {
var c = s.el(data[x].childs[y].type).attr(data[x].childs[y].attrs);
p.append(c);
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js?wmode=transparent"></script>
<svg width="500" height="500" viewbox="0 0 100 100"></svg>要添加更多子元素，应使用以下代码
var data = [{
type: "g"
}, {
type: "image",
appendTo: 0,
attrs: {
"xlink:href": "http://lorempixel.com/500/500/",
x: 0,
y: 0,
width: 50,
height: 50
}
}, {
appendTo: 0,
type: "a",
parent: true,
attrs: {
x: 5,
y: 5,
target: "_blank",
"xlink:href": "http://snapsvg.io/docs/"
}
}, {
appendTo: 2,
type: "circle",
attrs: {
cx: 5,
cy: 5,
r: 2.5,
fill: "orange"
}
}]
var s = Snap("svg");
var elems = [];
for (var x = 0; x < data.length; x++) {
var e = s.el(data[x].type).attr(data[x].attrs);
if (data[x]["appendTo"] !== undefined) {
var p = elems[data[x].appendTo];
p.append(e);
}
elems.push(e);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div class="box">
<svg width="100%" height="100%" viewBox="0 0 100 100"></svg>
</div>关于javascript - 使用 JavaScript 和 JSON 构建内联 SVG 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36626714/