读书笔记:《SVG精髓》 – [美] J. David Eisenberg / [加] Amelia Bellamy-Royds 著 / 易郑超 何鹏飞 译

读完时间:2021 年 9 月 30 日

出版时间:2015 年 9 月

1.1 图形系统

计算机中描述图形信息的两大系统是栅格图形(raster graphics)和矢量图形(vector graphics)。

"读书笔记:《SVG精髓》 – [美] J. David Eisenberg / [加] Amelia Bellamy-Royds 著 / 易郑超 何鹏飞 译"继续阅读

读书笔记:《SVG动画》 – [美]莎拉·德拉斯纳 著 / 大漠 译

读完时间:2021 年 8 月 18 日

出版时间:2018 年 5 月

viewBox 和 preserveAspectRatio

viewBox的值并没有带单位,这是因为SVG可视空间并不是基于像素来设定的,而是一个可任意延展的空间,这样就可以适应许多不同的尺寸。

"读书笔记:《SVG动画》 – [美]莎拉·德拉斯纳 著 / 大漠 译"继续阅读

使用 max-height 实现动画效果的“展开收起”

当页面中有大量非重要信息时通常使用“展开收起”来处理,常见的作法是在 display: none; 和其它属性之间切换。如果想加上些动画效果通常使用 JavaScript 来实现,若想用 CSS 来实现只需设置 max-height 的值在 0 和一个比目标元素高度大的值之间切换即可。

"使用 max-height 实现动画效果的“展开收起”"继续阅读