使用JavaScript和JSON构造内联SVG图

Question

我目前正在从事一个涉及构建动态图的项目，并且正在考虑为此使用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> 

Answer 1

您可以使用Snap轻松创建所需的内容。 在下面的代码段中，我添加了元素的所有必需属性和类型，并使用.el()创建了一个svg元素

el的语法是

Paper.el(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>