SVG_22_marker标签定义标识_如箭头

知识点：

marker标签中，有以下几个主要属性

• refx属性为x轴的偏移量，即箭头与线的偏移，0表示接触；

当refx为0时：

当refx为12时：

一对比，效果立马明白了吧。

 

• refy属性为Y轴的偏移量，一般设置为图形的一半，这样指示出来的比较顺眼；

当refy为marker控件Y轴一半时：

当refy为0时：

• markerWidth、markerHeight目前来看控制marker的大小；

markerWidth和markerHeight可分别控制marker大小

当markerWidth或markerHeight为6时：（为了显示更清晰，换了红色）

当markerWidth或markerHeight为2时：

 

PS：这里对这两个属性有一个未知：从0到6是依次变大的，但再往后变大数值，图形不变了，估计是受我现在的认知，以后待提升优化。

 

• orient属性表示线的方向，一般设置为auto，表示跟随线的方向。

当设置为orient=“auto”时：

当不设置orient属性时，会展示原来的坐标位置，导致很难看：

 

---

 

marker可以做出各种图形，五角星、圆形、无规则图形，因为marker使用的是path标签绘制的，所以只要path能绘制出来，marker就能应用起来。所以理论上可以绘制任意图形。

 

marker不止可以应用path，还可以引用rect、circle等等各种图形标签。

 

我试了polyline标签，通过

marker-end="url(#Triangle)"引用在defs标签里面定义的marker

说到这里，引用时，其实有多个标签

 

当使用marker-end引用时：会在末端引用

当使用marker-mid引用时：会在各个中间结点都会引用

当使用marker-start引用时：会在其实端点引用

 

---

 

我又试了使用circle引用了marker，没有效果，猜测是找不到开始点、结束点。

 

好了，今天就这些。marker用法，走起。

 

Xi说孔方兄认证