标签： svg

原本用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