svg在线绘制-svg path 画弧线

您好,使用135编辑器SVG制作没有颜色的图片,可以通过以下步骤来实现:

1. 首先,打开135编辑器,点击“文件”菜单,选择“新建”,然后在弹出的对话框中选择“SVG”,点击“确定”,即可创建一个空白的SVG文件。

2. 然后,在135编辑器中绘制你想要的图形,可以使用矢量工具,如“矩形工具”、“椭圆工具”、“多边形工具”等,也可以使用笔刷工具,如“画笔工具”、“曲线工具”等。

3. 接着,点击“颜色”菜单,选择“无色”,即可将绘制的图形设置为无色。

4. 最后,点击“文件”菜单,选择“保存”,即可将制作的无色SVG图片保存到本地。

点击上色,可以使用135编辑器中的“颜色”菜单,选择你想要的颜色,即可实现给SVG图片上色的效果。

svg用路径画弧线图,对于像我这样的初学菜鸟来说不太友好,看解释来说是挺费劲的,查百度的一般难以看懂,不够通俗易懂,过于官方语言,自己动手画的时候,这曲线它有自己的想法,非常任性,后来琢磨了一下,大概了解怎么回事了。先上效果图。

简单来说就是点线面,就和学数学一样,在一个平面上,一个点有x,y坐标,而多个点连起来就是连成线,加了填充就是面。

path 标签 :

M 0 65 即开始点在以画布为参考对象的 M( x: 0, y: 65 ) 点

S 表示 平滑曲线,关于使用什么线,可以在菜鸟教程中查看和测试

其中大写S表示以画布为参照物(绝对定位,大写都是这个意思),后面数据点的坐标以画布最左上角作为参照物

小s的话,是以上一个点为参照物(相对定位,即上一个点当做是0,0,同理)

本例中:

圆: 圆心(65,65),半径为65,直径130

路径:

<path d="M 0 65 s 32.5 32.5 65 0" stroke="blue" stroke-width="1" fill="blue" />

即以 点 M(0,65) (参照物为画布)出发,点(32.5,32.5)以上一个点M(0,65)起始点(0,0),点(65,0)以上一个点(32.5,32.5)当做起始点(0,0),形成弧线最后一个闭合点,

其中点(32.5,32.5)并不是说在弧线经过这个点,而是这个点是弧线两条切线的交点

那么到第二个半圆也就懂了

<path d="M 65 65 s 32.5 -32.5 65 0" stroke="blue" stroke-width="1" fill="blue" />

即以 点 M(65,65) (参照物为画布)出发,接下来的点以上一个点为参照物

除了弧线,其他线也是这样

SVG中所有基本形状都是path的简写形式,但是建议使用简写形式,因为这样可以使SVG文档更可读。

path元素更通用,可以通过制定一系列相互连接的线、弧、曲线来绘制任意形状的轮廓,这些轮廓也可以填充或者绘制轮廓线,也可以用来定义裁剪区域或蒙版。

下表为path命令总结,其中大写表示绝对坐标,小写表示相对坐标:

路径的填充同样可以使用fill-rule属性指定填充规则,如果需要填充一个中空的形状,则只需要注意外侧路径顺逆时针方向和内侧空心区域顺逆时针方向即可。

首先,使用 M 移动画笔到起点坐标(这里假设是 0,0 ),然后使用 L 画一条直线至终点坐标(这里假设是 100,100 )。

这里使用 C 来绘制一条三次贝塞尔曲线。

三次贝塞尔曲线的每个控制点都有两个控制点。 因此,要创建三次贝塞尔曲线,需要指定三组坐标。

这里的最后一组坐标(x,y)指定了线的结束位置。另外两个是控制点。(x1,y1)是曲线开始的控制点,(x2,y2)是曲线结束的控制点。控制点本质上描述了从每一点开始的直线的斜率。然后,贝塞尔函数创建了一条光滑的曲线,从建立的斜率在线的开始,到另一端的斜率。

示例中该条贝塞尔曲线计算公式为

marker元素用来在path上添加一个标记,比如箭头之类的。

首先需要定义好marker元素,然后在path中引用,一个marker标记是一个独立的图形,有自己的私有坐标。

首先,我们使用 marker 画一个箭头。设置orient为 auto ,使箭头的方向自动旋转匹配路径的方向。

然后,可以在连接线的 path 中使用 marker-start , marker-mid , marker-end , marker 属性来设置标记的位置。

这里,我们使用 marker-end 在线的结尾加上箭头。