svg画双向箭头

之前做的时候找了下网上的 都是单项箭头 双向箭头的另外一个箭头和单向箭头不一样 另外一个箭头是我在直角坐标系一个点一个点画的 记录下来以后再用可以省很多时间

代码 

 
        
            
                
            
            
                
            
        
        
    

说明:

page-map样式里设置了svg的宽和高 

marker属性说明直接在别的网站截的图

svg画双向箭头_第1张图片

2个marker的path d属性不要动 这个保证了2个相对的箭头 fill设置了箭头的颜色

line画了一条直线 当然也可以画其他的 重点不在这里 

marker-start设置了起始点的箭头 marker-end设置了终点的箭头 如果是单向的可以去除掉一个 绑定的箭头不要绑定错了

 

你可能感兴趣的:(html5,JS)