SVG Path(二)移动与直线命令

简介: SVG Path(二)移动与直线命令
  • 测试命令
  • M(x,y)+ 移动画笔,后面如果有重复参数,会当做是 L命令处理。
  • L(x,y)+ 绘制直线到指定位置。
  • H(x)+ 绘制水平线到指定的 x 位置。
  • V(y)+ 绘制竖直线到指定的 y 位置。
  • m、l、h、v 使用相对位置绘制。
  • 案例代码
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
    <path d="M 10 10 L 100 10 V 50 H 150 v 30 l 30 0 v -50 h 100" stroke="blue" fill="red" />
</svg>

相关文章
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
SVG Path(三)弧线命令
SVG Path(三)弧线命令
193 0
|
6月前
|
移动开发 前端开发 JavaScript
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
210 0
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
|
11月前
|
前端开发
css绘制三角形
css绘制三角形
44 1
|
JavaScript
js获取屏幕上圆和椭圆的点坐标
js获取屏幕上圆和椭圆的点坐标
js获取屏幕上圆和椭圆的点坐标
|
计算机视觉
OpenCV-最小包围旋转矩形边框cv::minAreaRect
OpenCV-最小包围旋转矩形边框cv::minAreaRect
179 0
SVG Path(四)贝塞尔曲线命令
SVG Path(四)贝塞尔曲线命令
149 0
|
前端开发
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
139 0
|
前端开发 容器
CSS 绘制三角形的方法
6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的,也是各种面经中经常出现的,利用了高宽为零的容器及透明的 border 实现。