使用SVG绘制带箭头的线
2016-10-31 11:40
387 查看
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto"> <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;" /> </marker> </defs> <line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"/> <path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)"/> </svg>
相关文章推荐
- 使用SVG绘制带箭头的线
- 使用Raphael绘制流程图,自绘动态箭头,可拖动,有双击事件,纯前端,兼容各种浏览器
- [HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果
- 使用ChemDraw如何绘制箭头
- 【Android 进阶】SVG 的使用以及绘制动画
- 使用Batik绘制SVG图并保存为png图像格式
- 使用CSS3绘制关闭以及箭头图标
- 使用SVG和VML绘制WebGis地理信息
- 在C++中使用GDI+绘制带箭头的线,箭头大小可调
- 使用SVG绘制湖南地图
- 使用SVG绘制转盘图形加上转盘抽奖功能
- [HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
- 如何使用SVG制作箭头
- svg使用path绘制路径
- 使用HTML5进行SVG矢量图形绘制的入门教程
- HTML5之SVG 2D入门2―图形绘制(基本形状)介绍及使用
- 【D3.js数据可视化系列教程】--(八)使用D3绘制SVG
- 使用Batik绘制SVG图并保存为png图像格式
- IOS绘制矢量图 SVGKIT 的使用
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用