![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
干货小技巧
文章平均质量分 64
莫纷飞
从零自学,入职菜鸡前端工程师。近来有感而发,先写点自己觉得好玩好研究的东西吧,每天更新,总结一下工作中的或者自己研究的,听闻的东西。时间充足的话就多谢点,不足的话就少些点吧。
不在乎多少,只要天天坚持即可,就像健身一样
展开
-
如何获取SVG中g标签的宽高及位置坐标
获取SVG中g标签的宽度高度及位置坐标1. 问题的出现对于普通的HTML元素,有很多获得其宽度width、高度height、距左left、距顶top等属性的方法: 类似offsetWidth,clientWidth,width之类的,通过查看DOM元素的属性可以一探究竟: 然而当遇到SVG的g标签的时候,却碰到问题了: 明明在开发者工具中可以显示的宽高、位置坐标等属性,通过原有的of原创 2016-09-13 00:28:11 · 29473 阅读 · 2 评论 -
如何将强大的SVG滤镜用在HTML元素中
SVG滤镜用至html元素上的方法SVG滤镜的强大有目共睹,不仅可以达到PS级别的图像处理效果,甚至可以通过添加动画达到前所未有的强交互效果,令人赞叹:一篇SVG滤镜交互的按钮demo。那么如何将svg的滤镜效果加入html元素中呢 通过css自带的 filter:url(<url>) 用法即可,以下是例子<!DOCTYPE html><html lang="en"><head>原创 2016-09-14 00:47:28 · 1318 阅读 · 0 评论 -
如何使SVG内的animate标签属性多值变化
animate标签多值变化(非两值)今天在工作的时候内,想要实现一个circle的动画效果,效果的描述是这样的: 园的半径从5,扩大到10,再从10减小到5,然后许仙循环但是在实际操作之中,却发现,规定属性值得form,to,by注定只能在两个值之间变化。(from和to的值是绝对的,by的值是相对的)。 那么如何多值变化呢? 其实还有一个属性叫做values。values的值是由3值及原创 2016-09-15 00:48:33 · 2224 阅读 · 0 评论 -
滤镜高斯模糊的边界或边框问题的解决和优化
1. 所谓 “高斯模糊的边界问题” 介绍相信有很多刚刚接触SVG滤镜模糊的新人们都可能遇到过这种问题: 1. 当模糊偏量很小的时候:<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"原创 2016-09-07 23:20:17 · 8972 阅读 · 0 评论 -
Notification桌面提醒:HTML5新功能
1.Notification介绍window.Notification,是一个通过浏览器调用桌面弹窗的API,具体效果如下 如今支持Notification基础功能的浏览器有Chrome,Firefox,Opera,Safari(IE在角落默默画圈); 支持Notification的option.icon功能的有Chrome,Firefox; 支持Notification的option.sou原创 2016-09-21 23:30:44 · 2147 阅读 · 0 评论 -
ES6-一个关于函数解构赋值默认值的有趣案例
ES6-一个关于函数解构赋值默认值的有趣案例在说这个小案例前,先简单的梳理一下ES6的解构和默认值赋值 PS: 已经了解的同志的同志可以直接看小栗子1. ES6的解构ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中 即分为两种情况:从数组Array中解构,以及从对象Object中解构①.从数组中解构c...原创 2018-07-17 18:56:07 · 3700 阅读 · 1 评论 -
git rebase: 合并/截取commit及分支间的commit拼接
git rebase: 合并/截取commit 及 分支间的commit拼接一. 只涉及单独分支的操作1. 合并commit当前分支状态: A--------B-------C--------D |--想要合并的commit--|预计合并之后的状态:A--------B'(包含C, D)使用命令: git rebase -i [s...原创 2018-07-26 11:56:37 · 4826 阅读 · 0 评论