如果我想给一条路径的两个端点加上箭头(三角形),或者小圆点,菱形等标记应该怎么做呢?
在线DOME预览
标记是marker
SVG中一个比较重要的概念,它能贴附于<path>
、<line>
、<polyline>
、<polygon>
元素上。最常用的应用就是给线段添加箭头。标记写在 defs中可用于定义可重复利用的图形元素。
标记 marker
的各属性和意义:
viewBox
: 坐标系的区域
refX
,refY
: 在viewBox
内的基准点,绘制时此点在要贴附的直线端点上
markerUnits
: 标记大小的基准,有两个值,即strokeWidth
(线的宽度)和uesrSpaceOnUse
(线前端的大小)
markerWidth
,markerHeight
:标记的大小。
orient
: 绘制的方向,可设为auto(自动确认方向)和角度值
id
: 标识的id号
设置位置的属性如下:
marker-start
: 路径的起点处
marker-mid
: 路径的中间端点处(直线只有起点和终点,所以对直线无用)
marker-end
: 路径的终点处
大家请看下面的例子:
<html>
<head>
</head>
<body>
<svg>
<defs>
<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" style="stroke: none; fill:black;"/>
</marker>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black;" />
</marker>
</defs>
<path d="M100,10 L150,10 L150,60"
style="stroke: green; stroke-width: 1px; fill: none;
marker-start: url(#markerCircle);
marker-end: url(#markerArrow);
"
/>
</svg>
</body>
</html>
在
<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" style="stroke: none; fill:black;"/>
</marker>
markerWidth和markerHeight为路标所在视窗坐标系的横轴与纵轴最大的刻度值。
视窗坐标系的原点在屏幕左上角,横轴正方向向右,纵轴正方向向下。
在SVG中需要在一个矩形视窗坐标系(viewport)中画路标,视窗坐标系的原点在屏幕左上角。
refX和refY定义将视窗中的哪个点作为锚点(在上面的例子以圆心为锚点)来挂在线段的端点上,如下图
下面的代码是画一个箭头作为锚点
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: black;" />
</marker>
示意图如下
在上面的代码中orient="auto"是指箭头方向随着路径的方向而自动变化
orient的值也可以用户自己定义
在
<path d="M100,10 L150,10 L150,60"
style="stroke: green; stroke-width: 1px; fill: none;
marker-start: url(#markerCircle);
marker-end: url(#markerArrow);
"
/>
在内联样式表style中,
marker-start指定路径的起点所采用的路标,url(#markerCircle)对应着前面那个id=markerCircle的路标
marker-end指定路径的终点所采用的路标,url(#markerArrow)对应着前面那个id=markerArrow的路标
除了可以通过marker-start来指定路径起点的路标样式,marker-end来指定路径终点的路标样式外,还可以
通过marker-mid属性来指定路径中间所有节点的路标样式。例子如下:
<SVG>
<defs>
<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
orient="auto">
<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:black;"/>
</marker>
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7"
orient="auto">
<path d="M2,2 L2,13 L8,7 L2,2" style="fill: black;" />
</marker>
</defs>
<path d="M100,20 l50,0 l0,50 l50,0"
style="stroke: blue; stroke-width: 1px; fill: none;
marker-start: url(#markerSquare);
marker-mid: url(#markerSquare);
marker-end: url(#markerArrow);
"
/>
</SVG>
在这段代码中首先在
然后在path中marker-start指定开始路标为矩形,marker-mid指定中间路标为矩形,marker-end指定终点路标为箭头。