前言
前端开发中，图片是必不可少的，而 SVG 格式的图片因为其矢量化、可缩放、清晰度高等特点，越来越受到前端工程师的青睐。但是，如何在 LESS 中使用 SVG 图片并解决兼容性问题呢？本文就为大家介绍。
使用 LESS 引入 SVG 图片
LESS 是一种动态样式语言，相较于 CSS 具有更强的拓展能力。使用 LESS 在网页中引入 SVG 图片，可以避免浏览器缓存的问题，同时也有利于代码管理。具体步骤如下：
- 准备 SVG 图片文件，需保证图片清晰度高，国内网站优先选择 Base64 格式。
- 使用 LESS mixin，定义一个 SVG 图片引入的方法，如下：
----------------- -
----------------- ----------------------
---------------- --------
------------------ ----------
-- 在需要引入 SVG 图片的地方，使用上述定义的 LESS mixin，示例如下：
--- -
-----------------------
-兼容性问题解决方案
在 Chrome 和 Firefox 等浏览器上，上述做法可以正常引入 SVG 图片并且显示正常。但是，在 Safari 等浏览器上，需要针对 SVG 格式图片做出一些特殊的处理，才能保证正常显示。
- 解决 Safari 中 SVG 图片无法缩放问题：
在 LESS mixin 中增加 webkit 样式属性，并启用硬件加速（-webkit-transform: translate3d(0, 0, 0)），示例如下：
----------------- -
----------------- ----------------------
---------------- --------
------------------ ----------
------------------------ --------
------------------ -------------- -- ---
-- 解决 Safari 中 SVG 图片在非 1x 情况下位置偏移问题：
在 LESS mixin 中增加 background-position 样式属性，示例如下：
----------------- -
----------------- ----------------------
---------------- --------
------------------ ----------
------------------------ --------
------------------ -------------- -- ---
-------------------- -------
-总结
使用 LESS 引入 SVG 图片是一种非常优秀的做法，有利于代码管理、避免浏览器缓存问题，同时也更加有利于前端性能优化。但是，需要注意兼容性问题，特别是 Safari 浏览器中的问题，需要做出相应的兼容处理。
希望本文能为大家带来一些帮助，并且能够启发大家发掘 LESS 等工具的更多玩法，更好地应用在实际开发中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6486bb3b48841e98945427f9