常见示例
最常见的在线条上画箭头代码
<svg>
    <!-- 预定义marker-->
    <defs>
        <marker id="arrow" refX="0" refY="3" markerWidth="20" markerHeight="20" orient="auto">
            <path d="M0 0 L0 6 L10 3" style="fill: #ffff;"></path>
        </marker>
    </marker>
    </defs>
    <!-- 引用预定义的marker -->
    <line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
先预定义了一个箭头形状的marker，然后画了一条线，并且将预定义的marker标到线条末端.
 
画出的图形
 
实现方法是用path画一个三角形并填充到marker中，形成三角marker，之所以用marker是因为，只有marker才能标到其它图形上. 但是marker是怎样被标记线条末端的？在marker中有refX、refY作用就是用来指定线条末点连接到marker上的位置. 连接上后，箭头指向哪边？orient属性则指定marker的方向.
 
 
如何为marker中坐标取值
首先marker与包含的path共用一个坐标系，如果坐标值不对则会显示不全.
比如上面marker的显示范围是(0,0)到(20, 20), path的范围是(0,0)到(10,6)，可知道path完全处在marker的显示区域内，因此path可以全部显示.
 
如果需改path值，path显示范围为(0,-3)到(10,3)，有一半内容在marker显示区域外，我们看到的就是半个三角形。设置坐标时要知道marker与path是共用同一个坐标系，path坐标不是相对于marker，注意path要在marker的可视范围内
<svg>
    <!-- 预定义marker-->
    <defs>
        <marker id="arrow" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
            <path d="M0 -3 L0 3 L10 0" style="fill: #ffff;"></path>
        </marker>
    </marker>
    </defs>
    <!-- 引用预定义的marker -->
    <line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
如下
 
理解marker的viewBox属性
用法viewBox(xmin, ymin, width, height)
查看文档可知道viewBox作用是拉伸图形。它是如何控制拉伸的？要想拉伸的话，指定长宽比例就可以了，怎么会用到xmin, ymin, width, height这些值，它们是和拉伸有什么关系？怎么理解？
实际上拉伸只是它的一个功能，换一种叫法就很好理解: 取景框. 它使用xmin,ymin,width,height这些参数确定取景范围，然后将取到的景象，放到marker中，并且充满整个marker. 如果取到的景象比marker可视范围小，则景象会被放大再充满marker；如果取到的景象比marker可视范围大，怎取景会被缩小再充满marker. 所以viewbox有两个功能：一是填充功能；二是拉伸.
 
比如上面只显示半个三角形，可以通过设置viewbox让它，在marker中完整显示.
<svg>
    <!-- 预定义marker-->
    <defs>
        <marker id="arrow" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto" viewBox="0, -3, 10, 6" >
            <path d="M0 -3 L0 3 L10 0" style="fill: #ffff;"></path>
        </marker>
    </marker>
    </defs>
    <!-- 引用预定义的marker -->
    <line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
上面viewBox控制了取景范围，正好将整个三角形取出来，再放入长20宽20的marker中，因为viewbox取到的景象长为10宽为6，小于marker大小，要想让三角形充满，则要放大景象，放大的比例长为20/10，宽为20/6.
显示结果