<svgwidth=”4in”height=”2in”
viewBox=”0040002000″version=”1.1″
xmlns=”http://www.w3.org/2000/svg”>
<defs>
<markerid=”Triangle”
viewBox=”001010″refX=”0″refY=”5″
markerUnits=”strokeWidth”
markerWidth=”4″markerHeight=”3″
orient=”auto”>
<pathd=”M00L105L010z”/>
</marker>
</defs>
<desc>Placinganarrowheadattheendofapath.
</desc>
<pathd=”M1000750L2000750L25001250″
fill=”none”stroke=”black”stroke-width=”100″
marker-end=”url(#Triangle)”/>
</svg>
下面详细看看marker的相关知识：
1.marker是容器元素，可以存放任意顺序的图形元素，容器元素，动画，渐变元素等。
2.marker元素可以创建新的视窗：设置viewBox的值。
3.marker比较重要的属性：
markerUnits="strokeWidth|userSpaceOnUse"
这个属性定义了属性markerWidth,markerHeight和marker的内容使用的坐标系统。这个属性有2个值可选，第一个值strokeWidth是默认值，代表属性markerWidth,markerHeight和marker的内容使用的坐标系统的单位等于引用该marker的图形元素的stroke-width设置的值。
例如上面的例子中，marker元素的width是400,height是300，不过千万不要混淆了，mark元素中的path使用的坐标是viewBox设置的新的用户坐标系。
该属性另外一个取值userSpaceOnUse，代表属性markerWidth,markerHeight和marker的内容使用引用该marker的图形元素的坐标系统。
refX,refY：定义了引用的点与marker对齐的位置坐标。例如上面的例子中，引用的点是终点，要把它对齐到marker的(0,5)位置。注意refX,refY使用的是经过viewBox变换过的最终用户坐标系。
markerWidth,markerHeight：marker视窗的宽和高，这个很好理解。
orient：定义了marker旋转的角度。可以指定一个角度或者直接赋值auto。
auto代表x轴正方向按照下列规则旋转：
a.如果marker所在的点只属于一个path，则marker的x轴正向与path走向相同。参看上面例子。
b.如果marker所在的点属于两个不同的path，则marker的x轴正向与两个path的夹角的角等分线走向一致。
4.图形元素的marker属性
图形元素要引用一个marker则需要使用相关的属性，主要是这3个：marker-start(把引用的marker放到起点),marker-mid(把引用的marker放到除起点和终点外的所有点),marker-end(把引用的marker放到终点)。这3个属性的取值可能是none(代表不引用marker),marker的引用(引用某marker)，inherit(这个不用多说了)。
从上面的例子中也可以看到marker的用法。
