原本用data:img/svg+xml;utf-8,<svg …. 这种写法,将svg作为css引入的背景图,既矢量,又能比base64更小,本来是不错的方案。但升级到最新Chrome (72.0.3626.109) 发觉竟不能正常显示了。 Google一翻,在Stackoverflow 找到了原因及解决方案:需要将<svg/> 转换为URL编码(URL encode)。也即原来的写法, [cc lang=”css”]data:image/svg+xml;utf8,<svg width=”40″ height=…
JQuery (版本3.0以下) 不能直接用addClass()或removeClass()或toggleClass()来控制SVG。但.attr() 方法支持SVG的类名控制: // 代替 .addClass(“newclass”) $(“#item”).attr(“class”, “oldclass newclass”); // 代替.removeClass(“newclass”) $(“#item”).attr(“class”, “oldclass”); 或者你不想用jQuery,可尝试如下原生写法: var element = document.getElementById(“item…
svg图标处理时,个人会习惯使用如下工具,且都是在线的(正常点的,或者说正版前端应该会用gulp之类吧?) https://jakearchibald.github.io/svgomg/ 爱死这个在线工具了,你可以直接将sketch或ps里边的svg代码,直接复制粘贴到站点,然后就可以生成一个干净的svg文件,且多选项可按需配置。当然你也可以直接将下载好的svg拉到这个在线站点来优化。 https://icomoon.io/app/ 早期是用www.iconfont.com管理iconfont的,但…谁用谁知道,反正我很多年没使用了,不知后面是否已优化。而当前推荐的这个站点,管理i…

1. PS or Sketch导出SVG图标; 2. 上传到https://jakearchibald.github.io/svgomg/ 优化并下载; 3. 在https://icomoon.io/整合,导出整合的svg文件,或iconfont 4. 在html页面引用 如何在Sketch整合分层的矢量图形为一体? 分两步 1.选中两个形状,点Combine合并(选择适当的方式) 2.菜单layer > Combine > flatten