svg : marker 标记

马黑黑 · 发表于 2024-10-28 20:49

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

marker，顾名思义，标记的意思，marker标签就是用来给 path、line、polyline 和 polygon 等元素做标记，比如给线头加个小圆点、给线尾加个小箭头、给线的接头处加个任意形状。看下面演示理解一下：

参考代码：

本例创建了两个marker标签，标记的宽（markerWidth）、高（markerHeight）一样，因为marker用做标记的实体元素一个是圆，另一个是个三角形，它们的占位尺寸也都是20*20；我们想让标记居中，所以设置的标记与线段的连接点——术语称之为标记参考点即 refX 和 refY——都是取其宽高的一半；每一个marker元素都有自己唯一的id标识符，这是要做标记的元素的引用依据。最后绘制的线条 line 引用了这两个marker标记，通过属性 marker-start（起始点标记）和 marker-end 终结点标记进行引用，赋值使用 url('#id') 函数，支持CSS表达法（上例所用方法），也可以单纯写成svg子元素的属性，像这样：marker-start="url(#id)" marker-end="url(#id)"。

实体元素引用marker标记还有一个属性，marker-mid，线段中间的标记，但这个标记在上例会无效，因为 marker-mid 属性只在线段的接头处生效，而上例只是一根直线，没有接头的地方。我们来看下一个例子，用小矩形做marker标记，给多边形图案加标记，中间的诸多连接点上的标记都是 marker-mid 给标上的，有多少个连接点就会标上多少个标记（左上角的小矩形是初始样式）：

参考代码：

留意marker标签的orient参数，它决定了标记的指向，这里我们设置为30，表示旋转30度。如果标记是一个箭头符号，效果显然不行，应把orient设为auto，自动跟随线段的走向旋转。试看下一个在折线上做标记的例子，它两头和里面用椭圆做标记，椭圆会自动跟随线头线尾线的拐点转向（左上角是椭圆的初始样式）：

参考代码：

marker元素还有两个属性，一是 markerUnits，用来设置坐标系，二是 viewBox，用来定义marker视口。markerUnits缺省时值为 strokeWidth，可选值为 userSpaceOnUse；viewBox 缺省时与实际宽高一致。关于marker标签的宽高这里给个建议：它的宽高设定与里面的元素的宽高最好保持一致，或里面的元素的尺寸不要突破marker元素的宽高设定。

（注：本文的svg绘制均由 svgdr 插件实时实现，参考代码的生成也由插件实时输出）