svg入门教程

988 阅读1分钟

最近因为工作需要,需要学习下svg。

因为svg和html语法很像,所以用了不到一天的时间就学习了大概。

我的学习路径大概是这样的:

首先是寻找学习资源,我用google搜索了下 svg tutorial,结果如下:

image.png

我选了几个链接点进入,对比了一下,最终选择了第一个教程,其实就是 MDN上SVG教程,点进入,发现写的简单易懂,还有条理。

image.png

前几节挨个挨个看,然后打开我亲爱的vscode,新建一个test.html,就开始跟着敲代码,纸上得来终觉浅,还是要自己敲才记得住

因为需求比较急,所以只看了工作需要的部分,基础形状、文本、变换等,看完之后发现整体内容还是比较好理解,有一个不好理解的点就是viewBox,看MDN的文档没有看太懂,

于是我在google上搜一下,找到了张鑫旭的一篇文章,还有动画演示,赞的,赞的

image.png

看完了之后,svg学的差不多可以用来写需求了,就开始写代码,边写边查MDN的svg文档,解决了需求。

最后再整理一下文中的资源。

现在的学习资源很多,如何找到你需要的,才是最重要的事情。