svg设置marker-mid无效

       在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不是一条线段或者一个路径的中间点,是一个路径上不是起始点,不是终点的中间的转折点,就像第一个有效的例子是一个中间标记,第二个有效的例子是两个中间标记,路径中间有几个转折点,这个路径就有几个中间的标记。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值