ton*_*nyf 2 html javascript css svg json
我目前正在开展一个涉及构建动态图的项目，并且正在考虑为此使用 SVG。
基于此，我想看看我所追求的是否真的可以用 SVG 实现。
1) 使用 JavaScript 和 json，是否可以根据我的 json 数据在 HTML 页面中动态构建 SVG 图？
基本上，我想在页面中构建一个矩形框，在那里我可以将 1 到 10 条 svg 行作为输入到左侧矩形框的输入。要确定实际出现的行数，将来自我的 json 对象。
因此，如上所述，这是否可能，如果可能，如何设置以绘制此内联 svg 图？
2) 同样，使用 JavaScript，是否可以根据 json 对象中的信息在这些 svg 行上放置超链接标签？
我开始使用静态内联 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 是您要创建的元素，例如 line、circle、path 等，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. 所以我稍微改变了我的代码。
在以下代码段中，我向名为 parent 的 json 数据添加了一个新键。然后设置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>| 归档时间： |
|
| 查看次数： |
900 次 |
| 最近记录： |