<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="折线图" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
height="300px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<dfs>
<line id="arrow_left" style="stroke:rgb(0,0,0);stroke-width:5;" x1="0" y1="0" x2="40" y2="0"/>
<g id="arrow">
<use xlink:href="#arrow_left" transform="rotate(-55 40,0)"/>
<use xlink:href="#arrow_left" transform="rotate(235 40,0)"/>
<line style="stroke:rgb(0,0,0);stroke-width:5;" x1="40" y1="0" x2="40" y2="540"/>
</g>
</dfs>
<use xlink:href="#arrow" x="0" y="0" />
<polyline points="40,424.408 171.238,291.143 280.37,354.912 533,100" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>
<use xlink:href="#arrow" x="0" y="0" transform="rotate(90 40,540)"/>
</svg>
前戏：想想各种笔画（line、polyline等）画在一个巨大的坐标系上。
剧情：
viewBox：从坐标系上 crop 一个矩形作为视野，即 SVG 的内容
svg.width/svg.height:定义 SVG 在页面中占据的范围
enable-background：不详（用 illustrator 时带出来的属性）
dfs：定义一些基础“组件”，定义不会被显示
use：引用定义中的基础“组件”
g：将基本元素“打包”（分组），以便作为一个整体来操作
transform：变换，rotate(旋转角度，旋转中心x，y)
