一、使用Marker画箭头

1.定义一个箭头的marker引用

<defs>
<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:#00ff00' />
</marker>
</defs>

注:orient="auto" 这个属性,箭头的方向会自动适应线条的方向。

2.定义线line,添加marker-start,marker-mid,marker-end 添加箭头加入的相应位置

<line x1='10' y1='10' x2='100' y2='50' stroke='red' stroke-width='2'
marker-start='url(#markerArrow)'
marker-mid='url(#markerArrow)'
marker-end='url(#markerArrow)'>
</line> <line x1='100' y1='100' x2='200' y2='150' stroke='red' stroke-width='2'
marker-end='url(#markerArrow)'></line>

3.使用path,在曲线中指定箭头位置

<path d='M50,250 c15,-75 30,30 100,0 s50,-50 150,50'
stroke='brown' stroke-width='5' fill='none'
marker-start='url(#markerArrow)'
marker-mid='url(#markerArrow)'
marker-end='url(#markerArrow)'/>

显示结果:

可以发现在直线line中marker-mid 是不起作用的,

我试过即使用path画一条直线也是一样的,
直线画中间的箭头需要用到三角函数,

在另一篇文章中有详细介绍:http://blog.csdn.net/tuposky/article/details/40677477

二、使用SVG.js 画箭头操作示例

var draw = SVG('container').size(300, 300);
draw.style('border', '1px solid green'); //定义marker
var arrow = draw.marker(12, 12, function (add) {
add.path('M2,2 L2,11 L10,6 L2,2');
add.style({
fill: 'green'
});
});
//使用 Marke标记画箭头
//画箭头
var line = draw.line(0, 0, 200, 150);
line.stroke('blue').attr({
'stroke-width': 2
});
line.marker('end', arrow); //画箭头2
var line2 = draw.polyline([
[100, 0],
[100, 200],
[150, 200]
]);
line2.fill('none').style({
stroke: 'red',
'stroke-width': 1
});
line2.marker('end', arrow)

更多:

SVG Path路径使用(一)

SVG Stroke属性

SVG 相关整理

SVG 使用marker画箭头(一)的更多相关文章

  1. 菱形实现气泡Bubble,菱形画箭头,菱形画三角形

    菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...

  2. android 使用Canvas画箭头

    public class MyCanvas extends View{        private Canvas myCanvas;    private Paint myPaint=new Pai ...

  3. Swift实时画箭头的实现

    iOS上实现画箭头,如果是指定了坐标点,那是很简单的,但如果需要做到实时绘制,就需要计算一下了 需求: 在白板上,根据手势落下点和移动点,实时绘制一条箭头直线(如下图) 实现代码: /// 获取箭头的 ...

  4. WPF画箭头

    简介 参考Using WPF to Visualize a Graph with Circular Dependencies的基础上写了一个WPF画箭头的库. 效果图如下: 使用的XAML代码如下: ...

  5. canvas画箭头demo

    效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...

  6. D2D画箭头的例子

    原文:D2D画箭头的例子 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/details/50830102 用处 ...

  7. 如何用CorelDRAW画箭头?

    CorelDRAW,简称为cdr,是一款专业的矢量绘图软件,在设计界也是常用的专业设计之一,在日常的设计工作中,我们常常需要绘制一些特殊的图形,比如箭头.很多对cdr不是特别熟练的小伙伴不知道如何用c ...

  8. 在matlab 画箭头

    [转载]在matlab 画箭头 原文地址:在matlab 画箭头作者:纯情小郎君 完整见链接http://www.mathworks.com/matlabcentral/fx_files/14056/ ...

  9. SVG.js Marker标记和自定义标签

    一.SVG.Marker 添加标记 SVG.Marker 标记可以被添加到一个线,折线的各点,多边形和路径.有三种类型的标记:开始,中间和结束.如果开始表示第一个点,则结束中间的最后一点和中间点. v ...

随机推荐

  1. CDM中添加Hive服务时Gateway是什么?

    参考这里http://grokbase.com/t/cloudera/scm-users/12aayq5cyh/what-is-gateway-in-cloudera-manager 实际上Gatew ...

  2. 微信小程序实现即时通信聊天功能的实例代码

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...

  3. Java日期时间类

    日期时间类有三种: 一.java.util.Date:一般用于声明日期时间类型的变量. 二.java.sql.Date:一般用于数据库日期时间的映射. 三.java.util.Calendar:一般用 ...

  4. ubantu18.04下Hadoop安装与伪分布式配置

    1  下载 下载地址:http://mirror.bit.edu.cn/apache/hadoop/common/stable2/ 2 解压 将文件解压到 /usr/local/hadoop cd ~ ...

  5. UML用例图之间的关系

    在画用例图的时候,理清用例之间的关系是重点.用例的关系有泛化(generalization).扩展(extend)和包含(include).其中include和extend最易混淆.下面我们结合实例彻 ...

  6. C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例

    C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例 Unity中循环遍历每个数据,并做出判断 很多时候,游戏在玩家做出判断以后,游戏程序会遍历玩家身上大量的所需数据,然后做出判断,即首先判 ...

  7. Android处理各种触摸事件

    Android里有两个类 android.view.GestureDetector android.view.GestureDetector.SimpleOnGestureListener (另外 a ...

  8. 1722 最优乘车 1997年NOI全国竞赛

    题目描述 Description H城是一个旅游胜地,每年都有成千上万的人前来观光.为方便游客,巴士公司在各个旅游景点及宾馆,饭店等地都设置了巴士站并开通了一些单程巴上线路.每条单程巴士线路从某个巴士 ...

  9. 使用Automation将Azure SQL DB容灾到本地

    前段时间有个客户有如下需求,将Azure SQL Database数据库容灾到本地(备份频率1小时/次). 那么对于这样的需求,我们可以使用Azure Automation来实现自动化备份到本地. 大 ...

  10. 如何用万用表判断一个12V蓄电池是否没电

    常用的方法如下: 1.找一根细铜丝,接触电瓶的正负极柱,冒火花说明电瓶有电,不冒火花说明没有电. 2.用万用表测量电瓶的电压,12.7V说明满电,11.50V一下说明没有电. 3.找一个12V的灯泡或 ...