巧用 SVG

前端教程SVG实用案例

商品图文展示

巧用 SVG 的文本和 CSS，让原本单调的商品图片变得可交互。

用鼠标划过自行车的各个部件：

新窗口打开

自定义 Checkbox

受够了默认的 Checkbox？尝试使用 SVG 自定义一个 Checkbox 吧！

新窗口打开

图片裁剪

新窗口打开

动画绘制

可以使用 vivus 实现动画绘制效果：

• 点击 SVG 可重复动画

新窗口打开

图片和视频占位符

由于图片和视频资源比较大，所以会晚于其他页面元素呈现，其他元素会挤在图片或视频上，等图片或视频加载好之后，其他元素又回归原位，导致页面抖动；此时我们可以使用 SVG 来实现占位符，消除页面抖动：

• viewBox="0 0 1280 720" 需要和首帧图片以及视频尺寸一致

新窗口打开

消除字体抖动

一般官网首页都会有自己的字体，然而字体加载成功之前，官网首屏是浏览器默认字体，等字体加载成功之后，应用新字体，会导致文本抖动，此时我们可以把首屏文字换成 SVG Path，以消除字体抖动：

• 下面的 codepen 中，分割线上方是 SVG Path 文字，下方是普通的字体文字
• 如果网络卡顿，字体加载慢，下方的字体文字会发生抖动，而上方不会。

新窗口打开