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

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

最终用svg做出来的效果图大致如下：

由于是初次接触svg，这里将实现这个效果所涉及的基本操作记在这里。

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

  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="300" x2="539" y1="300" x1="35" stroke-width="0.4" stroke="#000" fill="none"/>
  <line fill="none" stroke="#000" x1="35" y1="301" x2="35" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2000年-->
  <line fill="none" stroke="#000" x1="59" y1="301" x2="59" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2001年-->
  <line fill="none" stroke="#000" x1="83" y1="301" x2="83" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2002年-->
  <line fill="none" stroke="#000" x1="107" y1="301" x2="107" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2003年-->
  <line fill="none" stroke="#000" x1="131" y1="301" x2="131" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2004年-->
  <line fill="none" stroke="#000" x1="155" y1="301" x2="155" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2005年-->
  <line fill="none" stroke="#000" x1="179" y1="301" x2="179" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2006年-->
  <line fill="none" stroke="#000" x1="203" y1="301" x2="203" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2007年-->
  <line fill="none" stroke="#000" x1="227" y1="301" x2="227" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2008年-->
  <line fill="none" stroke="#000" x1="251" y1="301" x2="251" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2009年-->
  <line fill="none" stroke="#000" x1="275" y1="301" x2="275" y2="297" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2010年-->
  <line fill="none" stroke="#000" x1="299" y1="301" x2="299" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2011年-->
  <line fill="none" stroke="#000" x1="323" y1="301" x2="323" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2012年-->
  <line fill="none" stroke="#000" x1="347" y1="301" x2="347" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2013年-->
  <line fill="none" stroke="#000" x1="371" y1="301" x2="371" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2014年-->
  <line fill="none" stroke="#000" x1="395" y1="301" x2="395" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2015年-->
  <line fill="none" stroke="#000" x1="419" y1="301" x2="419" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2016年-->
  <line fill="none" stroke="#000" x1="443" y1="301" x2="443" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2017年-->
  <line fill="none" stroke="#000" x1="467" y1="301" x2="467" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2018年-->
  <line fill="none" stroke="#000" x1="491" y1="301" x2="491" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2019年-->
  <line fill="none" stroke="#000" x1="515" y1="301" x2="515" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>
  <!--2020年-->
  <line fill="none" stroke="#000" x1="539" y1="301" x2="539" y2="299" id="svg_3" stroke-linejoin="undefined" stroke-linecap="undefined"/>

实现的效果大致如下：

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

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

此时图片上多了一个红色和一个紫色的小圆点

3.用一个半圆弧将两个圆点连接起来，表示两者间引用关系
（注意圆弧的两端的坐标要与两个小圆点圆心的坐标一致）

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

关于path元素的属性a，可见这篇博客

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

<defs>
   <filter id="f1">
    <feGaussianBlur stdDeviation="3"/>
   </filter>
  </defs>

（2）在小圆点下方画矩形，并将前面定义的滤镜应用在矩形上：

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

实现的效果如下：

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

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

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