0


09——svg中path的使用

一、path 是 svg 中最强大的图形

  • 用于定义一个 路径
  • 所有命令均允许小写字母。大写 表示绝对定位小写 表示 相对定位 (相对于上一个结束的坐标)
  • d 属性中包含所有路径的点,可根据命令缩写 自由组合
     命令            名称                                参数
      M           moveto  移动到                        (x y)+
      Z          closepath  关闭路径                    (none)
      L           lineto  画线到                        (x y)+
      H          horizontal lineto  水平线到              x+
      V          vertical lineto  垂直线到                y+
      A        elliptical arc椭圆弧                    (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
      C        curveto 三次贝塞尔曲线到                 (x1 y1 x2 y2 x y)+
      S     smooth curveto光滑三次贝塞尔曲线到          (x2 y2 x y)+
      Q        Bézier curveto二次贝塞尔曲线到           (x1 y1 x y)+
      T     smooth Bézier curveto光滑二次贝塞尔曲线到     (x y)+

二、M、L、H、V 简单使用总结

  • M 作为起点,Z 作为结束
  • + 表示一次或多次
  • M 移动画笔,若有多个参数,会当做是 L 命令处理(画线)
  • L 画直线;H 移动水平位置;V 移动垂直位置
  • L 绘制直线到指定位置; l 从当前绘制直线移动多少多少
  • H 绘制水平线到指定位置;h 从当前绘制长度为多少的水平线
  • V 绘制竖直线到指定位置;v 从当前绘制长度为多少的竖直线
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"width="1000"height="1000"><pathd="M 150 0 L 0 150 L 300 150 Z"fill="pink"/><pathd="M 150 0 l 0 150 H 300 Z"fill="pink"/></svg>

在这里插入图片描述
在这里插入图片描述

三、圆弧

  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • 最复杂的命令
  • rx``````ry 表示 x轴半径y轴半径
  • x-axis-rotation 表示 x轴旋转角度
  • large-arc-flag 表示弧线 是否大于180度 (1 是大弧线,0 是小弧线)
  • sweep-flag 表示 弧线方向 ( 0为沿逆时针,1为沿顺时针 )
  • x``````y 最终坐标
<!-- x转旋转角度 --><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 0  1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 10 1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 100 1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 200 1 1 300 300"stroke="red"fill="none"></path></svg><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100 300 1 1 300 300"stroke="red"fill="none"></path></svg>

在这里插入图片描述
在这里插入图片描述

<!-- 可自行修改  large-arc-flag、sweep-flag查看  --><svgwidth="1000"height="400"><pathd="M 200 200 A 150 100, 0, 1, 1, 300 300"fill="green"/></svg>

在这里插入图片描述

四、贝塞尔曲线

  • 首先是理解贝塞尔曲线的原理,然后套用使用参数即可
  • 由于数学原理相对复杂,这里不做过多介绍,放上两张图便于理解
  • 二次贝塞尔曲线 ,一个起点、一个终点、一个控制点

在这里插入图片描述

  • 三次贝塞尔曲线 ,一个起点、一个终点、两个控制点

在这里插入图片描述

  • 可依次解开代码查看,效果如下
<svgwidth="1000"height="400"><!-- 二次贝塞尔曲线 Q --><pathid="lineAB"d="M 100 350 l 150 -300"stroke="red"stroke-width="3"fill="none"/><pathid="lineBC"d="M 250 50 l 150 300"stroke="red"stroke-width="3"fill="none"/><pathd="M 175 200 l 150 0"stroke="green"stroke-width="3"fill="none"/><pathd="M 100 350 q 150 -300 300 0"stroke="blue"stroke-width="5"fill="none"/><!-- 光滑二次贝塞尔曲线 T --><!-- <path d="M20 80 Q90 140, 130 80 T250 140 T350 40 " stroke="#000000" fill="none" style="stroke-width: 2;"/> --><!-- 三次贝塞尔曲线 C --><!-- <path d="M20 20 C90 140,130 140,200 25" stroke="#000000" fill="none" style="stroke-width: 2;"/> --><!-- 光滑三次贝塞尔曲线 S --><!-- <path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120" stroke="#000000" fill="none" style="stroke-width: 2;"/> --></svg>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

标签: svg XML

本文转载自: https://blog.csdn.net/weixin_42289080/article/details/130690338
版权归原作者 Unique·Blue 所有, 如有侵权,请联系我们删除。

“09——svg中path的使用”的评论:

还没有评论