svg 标记标签 : marker（二）

马黑黑 · 发表于 2023-11-7 11:51

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

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

x

本帖最后由马黑黑于 2023-11-7 11:53 编辑

marker标签（二）

marker标记最经典的用途把线段（含直线、曲线）变成箭头。我们先绘制一个小箭头——其实就是一个尖角朝右的小三角形，可以用path或polygon来完成，这里使用polygon绘制：

<svg width="10" height="10">
	<polygon points="0 0,0 10,10 5" fill="red" />
</svg>

效果：

这是很小的一个三角形，把这个三角形放在线段的末端，就是箭头了：

<svg width="100" height="100">
	<defs>
		<marker id="jt" markerWidth="10" markerHeight="10" refX="5" refY="5">
			<polygon points="0 0,0 10,10 5" fill="red" />
		</marker>
	</defs>
	
	<line x1="10" y1="10" x2="90" y2="10" stroke="purple" marker-end="url(#jt)" />
	<line x1="10" y1="15" x2="90" y2="85" stroke="purple" marker-end="url(#jt)" />
	<line x1="10" y1="20" x2="10" y2="90" stroke="purple" marker-end="url(#jt)" />
</svg>

【自动定向 orient="auto" 】

可是，除了水平线正常，斜线和竖线的箭头都患上了小儿麻痹症，长歪了。这是因为我们没有设置定向属性 orient，你可以勾选“自动定向”复选按钮将marker标记的定向设置为 orient="auto"，酱紫就能让箭头的朝向正确；取消勾选则又恢复原样。顺便提示一下，“自动定向”复选按钮也会影响后续的示例，因为它们都是使用了 id="jt" 的 marker 标记。

如果我们给 line 标签添加 marker-start 属性，则直线的头尾都会有箭头标记，但添加 marker-mid 属性，直线的中间不会出现出现箭头——我们上一节讲过，marker-mid 是为线段的衔接点准备的。所以，如果想在线段中间也加入箭头或其他标记，我们需要设置多线段连接，换言之，总线段应由多条线段组合而成。使用path绘制的曲线中，如果只是一个单一的二次或三次贝塞尔曲线，则它也和line一样没有衔接点，加T或S之后，每一个T或S都是一个衔接点。我们可以这样理解：用path绘制的路径，定位起点的M指令和第一个绘制指令不计在内，其他的，每出现一个绘制指令，都是路径的一个衔接点，都接受 marker-mid 标记。下面，先从代码比较一下使用贝塞尔曲线指令绘制的曲线，判断一下，若在其上使用 marker-mid 属性，它是否会生效：

① 二次贝塞尔曲线 ：d="M10 50 Q50 -30,100 50"
② 二次贝塞尔曲线+T : d="M10 50 Q50 -30,100 50 T190 50"
③ 三次贝塞尔曲线 : d="M10 50 C0 0, 110 0,100 50"
④ 三次贝塞尔曲线+S : d="M10 50 C0 0, 110 0,100 50 S200 100,190,50"

以下的演示，每一个贝塞尔曲线都是用了 marker-mid 属性调用箭头标记，请对应上面的代码进行比较：

标记定向属性 orient 除了auto值，还有其他几个。完整的属性值如下：

auto | auto-start-reverse | <angle> | <number>

其中，auto-start-reverse 表示，首端标记取反向、其他取自动转向；<angle> 和 <number> 都是使用角度表示标记的转向，二者的区别不好理解，这里不谈。

【小结】本讲主要讨论marker标记的定位属性 orient，该属性最常用的值是 auto，它可以令标记的朝向与调用者实体的线段或路径走向保持一致。特殊定向需求可以考虑使用其他上面提供的备选值。我们还专门复习了 marker-mid，它是总线段或总路径的衔接点的标记而不是一条独立线段或路径的中间标记。