SVG_5_矢量图_Path标签_弧线世界开启

知识点：

• path标签

path标签中的d属性用来控制path坐标，d属性中有不少特殊的“大写字母”，这些“大写字母”用来控制。其实这些字符还有“小写字母”。至于两者的区别是：“大写字母”是绝对坐标，“小写字母”是相对坐标。

M：用来表示线条的起点；放在一组坐标点之前

L ：用来表示连接线；

H：用来表示X轴水平线，用path的H和V能快速画出阶梯状图形；

V：用来表示Y轴垂直线，用path的H和V能快速画出阶梯状图形；

Z：用来表示线条的终点，结束线段；用来收尾闭合，因为默认是不闭合的；Z放在一组坐标点之后。

下面四个字母，其实是与贝塞尔曲线有关的参数。

C；S；Q；T；  这几个参数使用比较难一些，今天略过。

 

A属性：用来表示绘制弧形，这里着重介绍一下

• X半径：为什么区分X半径和Y半径，因为圆弧所在的圆，有正圆和椭圆；

• Y半径：正圆的X半径和Y半径是一致的，椭圆自然不一致；

• 角度：椭圆时才会用到，因为旋转椭圆的角度后，得到的弧线是不一样的，而如果是正圆，这个角度参数写多少都是不会变的，因为正圆旋转360还是一样的一段弧度；

• 弧长：0小弧，1大弧

• 方向：0逆时针，1顺时针

• 终点X坐标

• 终点Y坐标

 

介绍了这么多属性，下面是实际的效果图

先看代码，后看图，代码与图对照看

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 350"><!--      M打头--表示新的一条线；      L链接--表示后续点，多点连接；      Z结束--表示第一个点和最后一个点闭合；-->      <path d="M10 10L30 160L50 10Z" stroke="red" stroke-width="1" fill="none"></path>      <path d="M60 10L80 160L100 10" stroke="red" stroke-width="1" fill="none"></path><!--      两个图形中间一条线区分开来-->      <line x1="105" y1="0" x2="105" y2="400" stroke="blue" stroke-with="2"></line><!--      以上两条线可以用一个path搞定，看下方-->      <path d="M110 10L130 160L150 10ZM160 10L180 160L200 10" stroke="red" stroke-width="1" fill="none"></path><!--      用path的H和V能快速画出阶梯状图形-->      <path d="M210,10H310V100H350V200H400V300" stroke="yellow" fill="transparent"></path><!--      A标签画弧线，  A后面第一个参数表示X轴半径；              A后面第二个参数表示Y轴半径；              A后面第三个参数表示角度；椭圆时才会用到              A后面第四个参数表示弧长，0表示小弧，1表示大弧；              A后面第五个参数表示方向，0表示逆时针，1表示顺时针；              A后面第六个参数表示终点X坐标；              A后面第七个参数表示终点Y坐标；-->      <path d="M400,10A200 200 0 0 0 500 250" stroke="blue" fill="transparent"></path>      <path d="M400,10A200 200 0 0 0 500 200" stroke="yellow" fill="transparent"></path>          </svg>

效果图（优快云不知道怎么直接放SVG，这是截图，非svg）

 

最后来一个使用弧线画出的人脸，相比第一次的生硬，这次柔和的一些

（优快云不知道怎么直接放SVG，这是截图，非svg）