本文介绍了SVG的基本图形绘制，包括矩形、圆形、椭圆、直线、多边形和折线的创建，并探讨了stroke、stroke-width、stroke-opacity、fill和fill-opacity等扩展属性的用法。此外，详细讲解了SVG路径的绘制，特别是path元素和各种绘图命令，如M、L、H、V、C等，以及它们在图形绘制中的应用。
在前面，已经学习了SVG的一些基础知识，了解SVG在页面中的定位，viewBox属性的使用场景还有它的兄弟preserveAspectRatio属性，有了这些基础知识之后，现在来学习SVG中图形的基本绘画。
基本绘画
矩形
以下代码代表绘制一个矩形，rect标签中的x、y属性分别指定了矩形左上角端点的横坐标和纵坐标，width、height属性分别指定矩形的宽度和高度。
<circle cx="100" cy="50" r="100" fill="red"></circle>
圆形
以下代码代表绘制一个圆形，circle标签中的cx、cy、r属性分别为横坐标、纵坐标和半径。
<circle cx="100" cy="100" r="100" fill="red"></circle><
最低0.47元/天 解锁文章
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
