使用svg制作作品引用关系图

在一个老师的讲座中看到了一张用svg制作的文献引用时间差的图,后来觉得自己在做的一个课题也可以用类似的表达。

最终用svg做出来的效果图大致如下:
使用svg制作作品引用关系图_第1张图片
由于是初次接触svg,这里将实现这个效果所涉及的基本操作记在这里。

1.画一条带刻度的水平线

  "undefined" stroke-linejoin="undefined" id="svg_1" y2="300" x2="539" y1="300" x1="35" stroke-width="0.4" stroke="#000" fill="none"/>
  "none" stroke="#000" x1="35" y1="301" x2="35" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="59" y1="301" x2="59" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="83" y1="301" x2="83" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="107" y1="301" x2="107" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="131" y1="301" x2="131" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="155" y1="301" x2="155" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="179" y1="301" x2="179" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="203" y1="301" x2="203" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="227" y1="301" x2="227" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="251" y1="301" x2="251" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="275" y1="301" x2="275" y2="297" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="299" y1="301" x2="299" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="323" y1="301" x2="323" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="347" y1="301" x2="347" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="371" y1="301" x2="371" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="395" y1="301" x2="395" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="419" y1="301" x2="419" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="443" y1="301" x2="443" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="467" y1="301" x2="467" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="491" y1="301" x2="491" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="515" y1="301" x2="515" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  
  "none" stroke="#000" x1="539" y1="301" x2="539" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>

实现的效果大致如下:
在这里插入图片描述

2.在水平线上画代表作品的小圆点

  "svg_4" fill="red" r="1.5" cy="298" cx="301"/>
  "svg_4" fill="purple" r="1.5" cy="298" cx="455"/>

此时图片上多了一个红色和一个紫色的小圆点
在这里插入图片描述
3.用一个半圆弧将两个圆点连接起来,表示两者间引用关系
(注意圆弧的两端的坐标要与两个小圆点圆心的坐标一致)

"svg_5" fill-opacity="0.5" stroke-width="0.4" fill="none" stroke="red" d="m301,298a77,77 0 0 1 154,0"/>

使用svg制作作品引用关系图_第2张图片

4.在小圆点下方添加带模糊效果的矩形
(1)定义一个实现模糊效果的滤镜:


   "f1">
    "3"/>
   
  

(2)在小圆点下方画矩形,并将前面定义的滤镜应用在矩形上:

  "svg_6" fill="red" height="10" width="2" y="306" x="300" filter="url(#f1)"/>
  "svg_6" fill="purple" height="10" width="2" y="306" x="454" filter="url(#f1)"/>

实现的效果如下:
使用svg制作作品引用关系图_第3张图片

另外,还可根据自己的需要添加关于图例的文字说明等……

根据自己的数据,重复上述步骤,即可实现最开始图片展示的效果。可能这个过程还可通过定义一个函数来实现,但还未探索过。

关于svg的基本语法,可参考菜鸟教程:SVG教程
本文是用SVG在线编辑器实现的。

你可能感兴趣的:(实用小技能,svg,canvas,filter)