Markers

撰写时间：2026-03-17

修订时间：2026-03-18

概述

可以先绘制一个图形，然后将该图形动态地添附到各种现有图形中。这种被添附的图形就称为marker。应用marker最常见的场合是为图形绘制箭头。

因需要绘制两个图形，且marker的视口与现有图形的视口往往不一样，因此，可分三个步骤来应用marker。下面取为一条线段的末端绘制箭头为例说明。

第一步，先在一个较小的视口内绘制箭头。

第二步，将其定义为一个marker。

这一步，svg的viewBox及marker的viewBox分别引用了不同的视口坐标系。

refX及refY用以指定两个图形的连接点。这里的连接点取自第一步图形中的最后一个顶点。

将orient属性值设置为auto，则箭头的朝向会根据线段的朝向自动旋转。

在defs中所定义的元素不会被渲染。

第三步，引用marker。

marker-end属性值的含义是，在path元素的末尾添附所指定的marker。个人认为，这个属性名不够精准，若改为end-marker似乎更容易理解。

同理，使用marker-start在线段始端添附marker，使用marker-mid在线段中间添附marker。

第一种方法是在定义marker时，将其fill属性值设置为SVG V2.0规范中的context-stroke，则marker的fill属性值取自引用主体的stroke属性值。

Chrome, Firefox, Edge及Opera均无问题。但Safari当前与IE一样糟糕，均不支持context-stroke属性值。

第二种方法是使用CSS变量，分别定义两种颜色的箭头。

这种方法将不可避免地产生许多冗余代码，不可取。

第三种方法是通过JavaScript来动态创建。

对于每个绘制箭头的path，取出其stroke颜色值，并赋值于一个动态创建的marker的fill属性，最后将path的mark-end属性值指向此动态创建的marker。

最后两行专为Safari服务，因为其应用了缓存机制，当我们使用JavaScript动态设置后，需利用这两行代码让其重绘svg，否则箭头的颜色值默认为黑色。Chrome则不需要这两行代码也可正常工作。