2024年最全SVG 入门基础（一）(2)，2024年最新含泪整理面经

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

• 浏览器支持情况：IE 9+、Chrome 33.0+、Firefox 28.0+、Safari 7.0+。

• SVG 属于 矢量图，位图 放大之后就是一个一个像素点组成的，位图 放大之后会出现模糊，矢量图 不会。

• 使用方式

1、浏览器直接打开。

2、在 HTML 中使用 <img> 标签引用。

3、直接在 HTML 中使用 SVG 标签。

4、作为 CSS 背景。

二、基本图形与属性

---

• 基本图形，也就是比较常用的图形

• <rect>：矩形，rx 与 ry 如果没有同时设置，会默认使用对方的值。

• <circle>：圆形

• <ellipse>：椭圆

• <line>：线

• <polyline>：折线，points 内坐标点值可以用 空格 或者 , 来分割开就行。

• <polygon>：多边形，points 内坐标点值可以用 空格 或者 , 来分割开就行，跟 折线 唯一不同的就是，它会帮你把最后一个点跟第一个点连起来，形成一个闭合图形。

• <path>：路径

• 基本属性

• fill：填充颜色

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-ga2ATfmX-1715652873570)]