前言因为项目中有很多地方需要用到字体svg图标，而项目中使用了很多不同来源的字体图标导致维护很麻烦，每一次需要新添加字体图标的时候就会有很麻烦的操作，因此想开发一个svg组件优化一下字体图标的引入，只需要将要引入svg文件放入指定文件夹中，然后通过svg组件绑定文件名称，就可以达到引用字体图标的目的。1.安装loader要处理svg文件，需要要svg-sprite-loader，解析svg，因为是只在开发时需要解析，因此加上后缀--save-dev或者-D。npminstallsvg-sprite-loader--save-dev2.使用svg-sprite-loader在vue.config
前言因为项目中有很多地方需要用到字体svg图标，而项目中使用了很多不同来源的字体图标导致维护很麻烦，每一次需要新添加字体图标的时候就会有很麻烦的操作，因此想开发一个svg组件优化一下字体图标的引入，只需要将要引入svg文件放入指定文件夹中，然后通过svg组件绑定文件名称，就可以达到引用字体图标的目的。1.安装loader要处理svg文件，需要要svg-sprite-loader，解析svg，因为是只在开发时需要解析，因此加上后缀--save-dev或者-D。npminstallsvg-sprite-loader--save-dev2.使用svg-sprite-loader在vue.config
Vivus是一个轻量级的JavaScript类(没有依赖关系)，它允许您对svg进行动画处理，使它们具有正在绘制的外观。有多种不同的动画可供选择，还可以创建自定义脚本，以您喜欢的任何方式绘制SVG。一、安装npm：npminstallvivusbowerinstallvivus通过script引用到页面二、使用本例子使用vue框架，在引入插件之后初始化如下：播放停止重置importVivusfrom"vivus";exportdefault{data(){return{myVivus:"",};},mounted(){this.myVivus=newVivus("my-vivus1",{rev
Vivus是一个轻量级的JavaScript类(没有依赖关系)，它允许您对svg进行动画处理，使它们具有正在绘制的外观。有多种不同的动画可供选择，还可以创建自定义脚本，以您喜欢的任何方式绘制SVG。一、安装npm：npminstallvivusbowerinstallvivus通过script引用到页面二、使用本例子使用vue框架，在引入插件之后初始化如下：播放停止重置importVivusfrom"vivus";exportdefault{data(){return{myVivus:"",};},mounted(){this.myVivus=newVivus("my-vivus1",{rev
一.同源策略问题（本地调试解决方案）firefox浏览器地址栏输入：about:config搜索security.fileuri.strict_origin_policy（这个是安全文件同源策略限制）,设置为false重启浏览器chome浏览器C盘下创建一个文件夹,名称随意（chromedata）找到chome快捷方式（复制一个，）复制的快捷方式打开属性->目标，后面加上"--allow-file-access-from-files--user-data-dir="C:\chromedata"--disable-web-security"--disable-web-security就是关闭同源
一.同源策略问题（本地调试解决方案）firefox浏览器地址栏输入：about:config搜索security.fileuri.strict_origin_policy（这个是安全文件同源策略限制）,设置为false重启浏览器chome浏览器C盘下创建一个文件夹,名称随意（chromedata）找到chome快捷方式（复制一个，）复制的快捷方式打开属性->目标，后面加上"--allow-file-access-from-files--user-data-dir="C:\chromedata"--disable-web-security"--disable-web-security就是关闭同源
在小程序中使用SVG，和在普通网页中不太一样。SVG也并不仅是另一种图片格式这么简单。它是代码，需要有额外的安全考量。在小程序里成功使用SVG的诀窍在于（1）结合CSSbackgroundimage，（2）采用inline方式，（3）用对DataURIscheme，（4）把内容转换为base64。经本文整理，向读者提供最完整的介绍。网上零零散散有一些关于在小程序中如何使用SVG的内容，但不是语焉不详，就是信息不完整。在此整理一下，供哪怕是此前从来没有接触过SVG的开发者也可以参考，迅速利用。首先SVG可以被视为一种DSL（DomainSpecificLanguage），也就是说它并不仅仅是J
在小程序中使用SVG，和在普通网页中不太一样。SVG也并不仅是另一种图片格式这么简单。它是代码，需要有额外的安全考量。在小程序里成功使用SVG的诀窍在于（1）结合CSSbackgroundimage，（2）采用inline方式，（3）用对DataURIscheme，（4）把内容转换为base64。经本文整理，向读者提供最完整的介绍。网上零零散散有一些关于在小程序中如何使用SVG的内容，但不是语焉不详，就是信息不完整。在此整理一下，供哪怕是此前从来没有接触过SVG的开发者也可以参考，迅速利用。首先SVG可以被视为一种DSL（DomainSpecificLanguage），也就是说它并不仅仅是J
华丽炫酷的动画特效总能够让人心旷神怡，不能自已。艳羡之余，如果还能够探究其华丽外表下的实现逻辑，那就是百尺竿头，更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效，并比较不同之处。图片实现最简单，也最容易理解的实现方式就是使用图片。曾几何时，几乎所有前端特效都需要借助图片来完成。实现原理很简单，通过不同的关键帧来“拼接”一段完整的动画影片，每一帧即该动画的每一个瞬间“状态”。首先声明必要的盒子模型：这里以div为例子，声明伪类对象heart。随后通过样式对heart伪类进行控制：.heart{cursor:pointer;height:50px;width
华丽炫酷的动画特效总能够让人心旷神怡，不能自已。艳羡之余，如果还能够探究其华丽外表下的实现逻辑，那就是百尺竿头，更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效，并比较不同之处。图片实现最简单，也最容易理解的实现方式就是使用图片。曾几何时，几乎所有前端特效都需要借助图片来完成。实现原理很简单，通过不同的关键帧来“拼接”一段完整的动画影片，每一帧即该动画的每一个瞬间“状态”。首先声明必要的盒子模型：这里以div为例子，声明伪类对象heart。随后通过样式对heart伪类进行控制：.heart{cursor:pointer;height:50px;width
