分享一些关于svg,制图辅助工具，svg图形的导入（4）

1.在demos里面利用表达式与动点导入贝塞尔曲线，圆，椭圆等

以二次贝塞尔函数为例,你可以设置三个动点,一边手动调节曲线弧度,用公式表示第4个点

横坐标：x(t)=(1−t)2⋅x0+2t(1−t)⋅x1+t2⋅x2x(t)=(1−t)2⋅x0​+2t(1−t)⋅x1​+t2⋅x2

​纵坐标：y(t)=(1−t)2⋅y0+2t(1−t)⋅y1+t2⋅y2y(t)=(1−t)2⋅y0​+2t(1−t)⋅y1​+t2⋅y2​

设立第4个动点,这样就可以表示贝塞尔曲线,但是你会发现,这个写起来好麻烦,一条曲线你就要写4,5行公式,

还有就是,虽然demos可以导入图片,就算你绘画技术不是很好的情况下也可以导入参考图进行绘画,对于上色很麻烦,主要原因是因为混合着贝塞尔曲线,直线,甚至是圆的图形,形状很不规则,对于多种颜色,范围,形状都很难定义。

那有没有有更加方便自由的方法呢?

2.在Godsvg中绘制svg

那就是Godsvg,这是一个比较轻量的工具,对于<path>可以直接生成一条曲线,自动实时读取点的坐标,设置一切关于svg的相关属性,

画布,宽高,实时生成代码

但有一个缺点就是,对于画技不是很好的人很不友好,因为该程序对于导入的参考图似乎要求比较高,也就是说,我试过的大部分图都不可以导入,包括.png.web.bmp等,就算是svg格式的图片导入进去也比较困难.

3.阿里巴巴矢量图标库

1.内容丰富,不管是图标还是插画,

2.支持中文搜索

3.下载代码即svg图片

可以下载SVG图片,在浏览器中打开,按F12就可以实时看每个图片资源的分区

4.图片转格式工具,以及如何导入svg图像资源,

在SVGcode—Convert raster images to SVG vector graphics这个网页中，

在项目中导入svg图片

方法一,直接在SVGcode—Convert raster images to SVG vector graphics复制svg代码，

方法二：将svg图片作为静态图片

<img src="图片路径/文件名.svg" alt="描述" width="200" height="200">

方法三：作为css背景图

<div style="width: 200px; height: 200px; background-image: url('图片路径/文件名.svg');"></div>