在一个老师的讲座中看到了一张用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)"/>
实现的效果如下:
另外,还可根据自己的需要添加关于图例的文字说明等……
根据自己的数据,重复上述步骤,即可实现最开始图片展示的效果。可能这个过程还可通过定义一个函数来实现,但还未探索过。