在 svg 中绘制箭头

在svg 中使用marker定义箭头元素,该元素可以镶嵌在defs元素中,实现箭头元素的复用。该元素可使用以下通用属性:

  • class

  • style

  • externalResourcesRequired

  • viewBox

  • preserveAspectRatio

  • transform

拥有以下专用属性:

  • markerUnits

  • refX

  • refY

  • markerWidth

  • markerHeight

  • orient

其中refx,refy 表示箭头的相对起始坐标,refx一般定义为0,refy定义为viewport渲染宽度的一半,markerWidth、markerHeight表示viewport渲染宽度和长度,一般的是viewport长、宽的一半;

箭头定义示例:



  
    
      
    
  

  

备注:对采用marker-end属性引用箭头,箭头将出现在线段的末端

 

 

 

你可能感兴趣的:(在 svg 中绘制箭头)