svgo

“ SVG 即 Scalable Vector Graphics 可缩放矢量图形，使用XML格式定义图形。 ” 一、SVG印象 — SVG 的应用十分广泛，得益于 SVG 各种 强大的 特性。 1.1、 矢量 可利用 SVG 矢量的特点，描出深圳地铁的轮廓： 1.2、iconfont SVG 可依据一定的规则，转成 iconfont 使用： 1.3、 foreignObject 利用 SVG 的 foreignObject 标签实现截图功能，原理： foreignObject 内部嵌入 HTML 元素： <svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="120" height="60"> <p style="font-size:20px;margin:0;">凹凸实验室 欢迎您</p> </foreignObject> </svg> 截图实现流程： 首先声明一个基础的 svg 模版，这个模版需要一些基础的描述信息，最重要的，它要有 <foreignObject></foreignObject> 这对标签； 将要渲染的 DOM 模版模版嵌入 foreignObject 即可； 利用 Blob 构建 svg 对象； 利用 URL.createObjectURL(svg) 取出 URL。 1.4、SVG SMIL

1. WebStorm 按两下空格输入 soft wrap 进行换行 2. 第一个坑: svg 中的 fill 属性处理 svg 里面如果有 fill="",就会有颜色，可以手动去除,但是如果有很多个 svg 那么一个个去很麻烦 用 svgo-loader 解决这个问题，在 vue.config.js 中配置 config.module .use('svgo-loader').loader('svgo-loader') .tap(options=>({ ...options, plugins:[{ removeAttrs:{attrs:'fill'} }] }) ) .end() 安装方法 yarn add svgo-loader -D 3. 碰到问题安装包和 node 版本不匹配 The engine "node" is incompatible with this module. Expected version "^8.16.0 || ^10.6.0 || >=11.0.0". Got "8.12.0" 解决办法用 nvm 安装 10 版本的,升级办法参考: https://dev.to/peterwitham/install-and-update-nodejs-on-the-mac-with-nvm-1m9j nvm install 10 4. 提交修改 点 Version