使用SVG画一朵小花花~

最新推荐文章于 2024-03-25 13:29:15 发布

VIP文章寂小换

最新推荐文章于 2024-03-25 13:29:15 发布

阅读量1k

点赞数 3

分类专栏：点点滴滴文章标签： svg html

本文链接：https://blog.csdn.net/weixin_42655776/article/details/98630700

版权

今天学习到IFE第三十四到第三十六天的任务时，需要使用SVG和Canvas来画图，做SVG的小练习时画了一朵小花花，感觉还挺好看的，使用的都是一些基本的SVG元素，所以就在这里记录一下。

先放一下最终效果：
在这里插入图片描述

首先，svg标签里的内容应该是根据代书写码顺序来呈现的，比如图里花茎被花瓣挡住了一部分，所以花茎部分相应标签要放到花瓣相应标签之前，才会有前后的效果。

花茎就是画一条两次贝塞尔曲线，加宽一下描边就好。代码如下：

<path d="M 100 100 Q 120 150 100 200" stroke="darkolivegreen" stroke-width="5px" stroke-linecap="round" fill="transparent"/>

因为默认填充为黑色，所以要设置一下fill为透明

花叶<

最低0.47元/天解锁文章

关注