之前做了一个 Chrome 插件，可以用于区分不同的开发环境，效果如下：,主要实现过程其实不复杂，首先获取网站 favicon，然后给 favicon 添加标识，重新绘制生成就行了。,其中，这里的图标就是通过 SVG 生成的，下面看看具体实现吧。,想知道获取方式，可以先了解设置方式。,一般有两种方式可以设置网站的 favicon。,第一种，通过 link 标签设置(需要rel=”icon”属性)。,第二种，直接在网站根目录放一张favicon.ico(必须是这个名称，浏览器默认的)，html 中什么也不用设置。,如果以上都没有设置，那么大概率会看到以下错误。,了解这些，获取就简单了，先通过link获取，只要rel包含icon就行了。,如果找不到，可以请求/favicon.ico，这里直接添加一个link。,这样获取的link就保证存在了，然后就是绘制。,由于需要合成图像，所以需要先绘制原有图像。提到图像绘制，可以想到 canvas 绘制，只需要一点点 canvas 基础知识就足够了。具体实现如下：,由于存在/favicon.ico没有设置的情况，所以需要在 img 加载失败的时候给一张默认图。,这样就能获取到 favicon 的图像信息了。,在上面的基础上，其实可以继续通过 canvas 进行绘制，再绘制一个标签也不是难事。不过这里可以采用 SVG 的方式来进行绘制，有以下一些优点。,成本更低，比 canvas 更易理解。,灵活性高，可以通过 CSS 进行一些样式控制。,首先，我们可以在 HTML 中自由的、像正常网页开发一样，绘制这样一个布局，相信没有什么难度。,由于宽度有限，所以需要强制文本换行，超出隐藏，关键样式如下：,接着，将这一段 html 放入 foreignObject标签中，关于 foreignObject[1] 的作用，有兴趣的可以参考张鑫旭老师的这篇文章 SVG 简介与截图等应用[2]，在这里，你可以简单理解为是可以包含 HTML 的标签，而 SVG 本身也是一种图片，这样就达到了合成图像的目的。,具体实现如下：,这里需要注意几点：,然后，将生成的 SVG 直接设置为 favicon，如下：,添加标识的 favicon,这样就能正常地渲染了~,完整实现可以参考项目：https://github.com/XboxYan/auto-dev-favicon-chrome-plugin[3]。,性首先是兼容性。,目前只有 Chrome 和 Firefox 是支持的(不过本文是运用在 Chrome 插件，所以无需关注这个问题)，但是为了兼容其他浏览器，可以用一个 .ico来兜底。,另外，在 Chrome 上还有一个限制(不知道是不是Chrome 更新后的安全限制)，当 favicon 使用 svg 格式图片时，此时的 svg 会处于一种secure-static-mode[4]，在这种模式下，所有动画都不会执行，会处于第一帧，比如下面这个例子：,很简单的一个背景颜色动画。在 Firefox 上是用作 favicon 是有动画的。,Firefox 下是动画状态,但是，Chrome 上却不行，只有禁止的第一帧。,Chrome 下是静止状态,比较类似的还有媒体查询，之前在网上看到有这样的实现，直接在 SVG 中实现黑暗模式。,比较类似的还有媒体查询，之前在网上看到有这样的实现，直接在 SVG 中实现黑暗模式。,但是也是同样的问题，只有 Firefox 下可行，Chrome是静止不动的。,Firefox 下是支持媒体查询的,什么时候 Chrome 可以解除这种限制呢?,总的来说，SVG 在绘制方面提供了无限可能，不仅仅是本文中的案例，觉得 canvas 过于复杂的都可以考虑这一方案。,[1]foreignObject: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject。,[2]SVG 简介与截图等应用: https://www.zhangxinxu.com/wordpress/2017/08/svg-foreignobject/。,[3]https://github.com/XboxYan/auto-dev-favicon-chrome-plugin: https://github.com/XboxYan/auto-dev-favicon-chrome-plugin。,[4]secure-static-mode: https://svgwg.org/svg2-draft/conform.html#secure-static-mode。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
