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>

相关文章
|
3月前
|
移动开发 前端开发 JavaScript
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
127 0
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
|
8月前
|
前端开发
用CSS绘制最常见的40种形状和图形(一)
用CSS绘制最常见的40种形状和图形(一)
43 0
|
4月前
|
前端开发
css绘制三角形
css绘制三角形
26 1
|
6月前
|
计算机视觉
OpenCV-最小包围旋转矩形边框cv::minAreaRect
OpenCV-最小包围旋转矩形边框cv::minAreaRect
|
8月前
|
前端开发
用CSS绘制最常见的40种形状和图形(二)
用CSS绘制最常见的40种形状和图形(二)
61 0
|
8月前
SVG Path(四)贝塞尔曲线命令
SVG Path(四)贝塞尔曲线命令
58 0
|
JavaScript
js获取屏幕上圆和椭圆的点坐标
js获取屏幕上圆和椭圆的点坐标
js获取屏幕上圆和椭圆的点坐标
|
9月前
|
前端开发 容器
CSS 绘制三角形的方法
6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的,也是各种面经中经常出现的,利用了高宽为零的容器及透明的 border 实现。
SwiftUI—通过Path路径绘制不规则的线条和图形
SwiftUI—通过Path路径绘制不规则的线条和图形
530 0
SwiftUI—通过Path路径绘制不规则的线条和图形
|
前端开发
CSS绘制三角形
CSS绘制三角形
104 0
CSS绘制三角形