SVG_4_矢量图_polyline_polygon标签_百度地图测距功能实现

知识点：

• polyline折线标签

• polygon多边形标签

区别就是一个是非闭合，一个是闭合的。

• polyline标签

虽然可以直接用line标签首尾相接画出折线，但是这样有一个缺点，就是折线交接处，会有空缺，感觉像拼接的一样，体验很差劲。

而是用polyline标签，会完美衔接，可看下图中的三个折线交接处，对比很明显。

 

但polyline有几个特点

1. 使用points属性控制显示多个点的坐标，每个X值与Y值直接使用空格区分，多个点位之间也是空格区分。空格可以使用逗号（,）来替代。

   空格==逗号

2. 多个点确定后，默认画出来的是带有黑色填充的，需要使用fill=“none”或者fill="transparent"，来置为空心。

<polyline points="90 90 120 190 200 260 290 220 330 260 410 110 510 0" fill="none" stroke="red" stroke-width="2"></polyline>        <polygon points="100,150,130,300,230,100" fill="none" stroke="blue" stroke-width="2"></polygon>

 

使用折线标签实现百度地图测距的功能。

 

北斗七星，其实可以画很多图形，因为使用了onmousemove事件、oncontextmenu事件、onmousedown事件，可以做出百度地图中测距的功能。

 

B 站效果视频

SVG实现百度测距功能

 

 

不知道CSDN怎么直接发SVG的运行效果，有懂的大神吗，求告知。