在svg中设置marker然后引用的方式特别方便,可以在线上加一些箭头指向,圆点之类的东西,但是碰到个问题让我郁闷了好久,就是设置marker-mid在line和path上无效。查了很多资料,解释只有一句话:须在每个绘制定义箭头或多标记顶点大于给定的第一和最后一个顶点其他<path>
元件或基本形状。否则无效,标记也不会被绘制。
这句话是什么意思呢?我来说说我的看法(有错误的地方希望大家指正,勿喷);
先举两个例子:
1、无效的例子
<path d="M10,95 L240,95" stroke="#f00" stroke-width="2" fill="none" marker-mid="url(#arrow)" />
2、有效的例子
(1)、只有一个中间标记的
<path d="M10,95 L125,95 L240,95" stroke="#f00" stroke-width="2" fill="none" marker-mid="url(#arrow)" />
(2)、有两个中间标记的
<path d="M10,95 L125,95 L240,95 L450 85" stroke="#f00" stroke-width="2" fill="none" marker-mid="url(#arrow)" />
总体来说我对这句话的理解就是:marker-mid不是一条线段或者一个路径的中间点,是一个路径上不是起始点,不是终点的中间的转折点,就像第一个有效的例子是一个中间标记,第二个有效的例子是两个中间标记,路径中间有几个转折点,这个路径就有几个中间的标记。