HTML5 SVG用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: #000000;" /></marker>
</defs>

有了orient="auto" 这个属性，箭头的方向就会自动适应线条的方向

2、定义一条线line或path等，添加属性
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)" /><path d="M505,50 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

HTML5 SVG用marker画箭头相关推荐

html5 svg画钟表,html5 svg创意卡通粒子时钟动画特效
非常简单可爱的一款html5 svg绘制的创意卡通粒子时钟动画特效,时钟走动指针动画非常有意思. 查看演示下载资源: 12 次下载资源下载积分: 20 积分 js代码 // Utilities ...
超详细SVG实战——徒手画pipeline，带你玩转SVG
记录个 svg 实战应用-最近断断续续在搞公司的前端发布平台,本想搞 pipeline ,结果先给 svg 给拦下了.基于发布平台没有同时多项目发布的能力,so-笔者决定搞个 pipeline 把 j ...
利用svg实现鼠标绘制箭头
使用svg实现鼠标拖动绘制箭头 <template><div id="svgMain"><svg version="1.1"id= ...
svg标记marker
svg标记marker 标记是SVG中的一个重要的概念,能贴附于<path>.<line>.<polyline>.<polygon>元素上.最典型的 ...
python matplotlib quiver——画箭头、风场
如果想用风羽画风场,请看另一篇python画风羽及风羽定义目录用像素点坐标画图用经纬度坐标画图(推荐) PS:三维箭头可参考: https://matplotlib.org/mpl_toolki ...
碉堡了！3款html5 svg 动画神作
1.html5 svg线条动态绘制iphone边框动画效果 >> 查看演示 >> 下载地址 2.html5 svg制作图片边框运动动画效果 >> 查看演示 > ...
【opencv】3.在一个opencv窗口中显示多个视频界面、画箭头、画掉头箭头
1.在一个opencv窗口中显示不同视频界面 /** * @brief 在一个opencv窗口win_name中显示不同视频界面 * @param img_1 和 img_2 是分别是取自不同视频中的 ...
12种超酷HTML5 SVG和CSS3浮动标签效果
这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...
html5波浪线条,HTML5 svg炫酷波浪线条动画插件
这是一款HTML5 svg炫酷波浪线条动画插件.该波浪动画插件基于tweenMax和SVG,也可以作为jQuery插件来使用,可以制作出漂亮的波浪线条动画特效. 使用方法在页面中引入jquery和T ...

HTML5 SVG用marker画箭头

HTML5 SVG用marker画箭头相关推荐

最新文章

热门文章