- 博客(404)
- 资源 (12)
- 收藏
- 关注
RSS订阅原创 SVG_33_script脚本标签
知识点：script标签：一个SVG脚本元素等同于HTML中的script元素，因此这个位置是面向脚本的（例如，ECMAScript）。任何定义在script元素中的函数拥有一个跨当前文档的全局范围。本来我还想着，使用脚本控制的话，会更灵活。呐，今天script标签就来了。使用script标签，我们就可以编写各种脚本，实现各种点击、滑动等高交互性的操作了。其实之前把svg写在html文档中也是可以的，但我更喜欢单独.svg格式。以后更多的交互效果，期待。...
2020-06-01 21:43:27
572
原创 SVG_32_月儿弯弯变正圆
月儿弯弯变正圆这篇文章的原理其实和SVG_15_史莱克七怪是一样的，都是通过控制显示与隐藏的方法达到想要的效果。话说天下大势，合久必分，分久必合。月儿亦是如此，残月可以变满月，满月会变残月。多次点击，使残月变满月，再变残月为了展示效果，放置的GIF，想体验效果，可以去公众号看看。...
2020-06-01 21:36:56
221
转载 ThinkPad笔记本切换F功能键方法
实际使用ThinkPad过程中，有时需要使用F1到F12的键，而ThinkPad默认这些键都是些音量、屏幕亮度、蓝牙等功能，需要同时按住Fn键，操作起来非常麻烦，于是我就搜索到了切换方法，感觉非常简单使用，特此分享。以下为原文：新款ThinkPad笔记本切换F功能键方法有所不同，写出来供大家使用。方法/步骤 新款ThinkPad笔记本默认启用笔记本的功能键的，不需要按Fn键，比如调节音量、亮度等，直接按相应功能键即可。 对于办公人员或工程人员而言，F功能键是很常用的，在默认
2020-05-27 10:44:31
6280
2
原创 SVG_31_温柔似水的Xi说SVG
水火相依，今天水给你看原理：还是使用的pattern引用的gif动画，然后使用在文字上面实现。相关文档：SVG_24_pattern标签_使fill填充_stroke描边多姿多彩不同的gif实现的效果肯定是不一样的。Xi说孔方兄认证...
2020-05-24 22:00:16
165
原创 SVG_30_火爆的Xi说SVG与孔方兄在看火烧赤壁
这个效果是使用pattern加载一个燃烧的火焰图片形成的。关于pattern怎么使用，去看这篇基础文章：SVG_24_pattern标签_使fill填充_stroke描边多姿多彩本篇算是pattern的一个简单应用，后面更精彩！Xi说孔方兄认证...
2020-05-24 21:57:27
231
原创 SVG_29_径向渐变radialGradient
知识点：radialGradient 用来定义径向渐变，以对图形元素进行填充或描边。说人话，就是定义辐射性渐变，就是以一个点为圆心，向周围进行颜色渐变。前面有文章讲解了线性渐变，有兴趣的可以点击查看：lineGradient线性渐变-- SVG_9_线性颜色渐变_竖排文字_动画使用radialGradient的方式与使用lineGradient的方式一样，都是在defs标签中定义的，然后通过url(#id)的方式进行引用。不仅可以用在fill填充，还可以应用在stroke描边上。这里其实和另一个
2020-05-24 21:55:28
1235
原创 SVG_27_指尖魔法_等你施法_斗罗大陆史莱克七怪_闪亮登场
作为斗罗大陆粉丝，在使用图片时，自然考虑到史莱克七怪。图片暗黑化是使用PS简单调整了下曲线，比较丑，见笑。好了，废话不多说，看效果。Q：暗黑的是不是不好看？A：你指尖有魔法，点击一下变好看吧。不管认不认得他们，释放一点指尖魔法看看。实现原理其实很简单：就是利用animate控制透明度opacity。开灯后，有没有刺眼的感觉，让我们一起施法开灯。...
2020-05-24 17:10:03
447
原创 SVG_26_SVG的灵活运用
今天不发效果图了，来聊一聊SVG的灵活运用。这篇文章好几天前就看到了，思前想后，感觉还是说一下，毕竟这个脑回路还是很赞的。具体是怎么回事呢？有个程序猿想写一个监控服务器的网页，想着能不能用小程序实现。按照规定，小程序请求地址必须在开发信息中手动报备并且要求域名备案。而这位想实现可以动态添加节点，并且通过小程序直接连接到服务器，不经过第三方服务器。然后就想到了使用SVG实现小程序和服务器的点对点连接。原理是巧妙运用了小程序 image 组件的 bindload 接口，当图片加载成功时会返回
2020-05-24 16:39:55
212
原创 SVG_25_520
今天是个好日子。本篇文章公众号发文时间为：2020年5月20日5:20也算是我业余时间玩SVG的一个小里程碑。（原因：算是掌握了在公众号文章发布效果的技巧，摸了好多天呐）。以后将会有更多更好的效果展示出来，耶！Xi说孔方兄认证...
2020-05-24 16:37:26
227
原创 SVG_24_pattern标签_使fill填充_stroke描边多姿多彩
知识点 pattern标签 定义：使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。重点：使用pattern，可以指定各种各样的样式，然后把样式应用到fill填充或者stroke描边中，使控件多彩炫目pattern定义好的一个样式，在应用到其他控件中时，会自动平
2020-05-18 16:03:12
1262
原创 SVG_23_mpath标签_轨迹复用
知识点： mpath标签 定义：<animateMotion> 元素的mpath子元素使<animateMotion> 元素能够引用一个外部的<path>元素作为运动路径的定义。下方的指示箭头是利用mpath标签画好路线轨迹，然后其他控件通过animateMotion的mpath子元素引用，达到使多个控件同一运动模式的目的。Xi说孔方兄认证...
2020-05-18 16:01:33
578
1
原创 SVG_22_marker标签定义标识_如箭头
知识点：marker标签中，有以下几个主要属性 refx属性为x轴的偏移量，即箭头与线的偏移，0表示接触； 当refx为0时：当refx为12时：一对比，效果立马明白了吧。 refy属性为Y轴的偏移量，一般设置为图形的一半，这样指示出来的比较顺眼； 当refy为marker控件Y轴一半时：当refy为0时： markerWidth、markerHeight目前来看控制marker的大小； markerWidth和markerHeight可.
2020-05-18 16:00:01
1934
原创 SVG_21_逐行展示_观沧海
今天做了一个逐行展示的效果，一行行的显示，主要使用了animate标签，其中每一个animate标签都是指id，然后下一个animate的begin=“上一个id.end”，然后fill="freeze"表示按照动画结尾的效果冻结。看效果：PS：有了GIF加成，再也不用等视频审核了。效果被吞，关门，放GIFXi说孔方兄认证...
2020-05-16 11:33:47
381
原创 SVG_20_牛顿摆球
公众号原文：SVG_20_牛顿摆球知识点：让一个控件根据指定路线，循环往复的移动，适用于不复杂的路径。有两个方法：其一，通过 animateMotion的路径闭合Z；<animateMotion path="M-40 0L0 0Z" dur="1s" repeatCount="indefinite"></animate>其二，通过animate的values的属性值，也可以实现来回往复；<animate attributeName=.
2020-05-16 11:31:48
314
原创 SVG_19_太阳_地球_月亮_三球仪_自转_公转
公众号原文：公众号_Xi说SVG_SVG_19_太阳_地球_月亮_三球仪本次实现的三球仪，太阳、地球、月亮都是有自转效果的，地球和月亮也都有自己的公转。我定义了渐变色来显示出三颗球体的自转，但由于在文章中展示不出效果，所以改为了纯色，视频中是渐变色的效果，可查看。简单来个知识普及：太阳（太阳系的中心天体）太阳是太阳系的中心天体，占有太阳系总体质量的99.86%。太阳系中的八大行星、小行星、流星、彗星、外海王星天体以及星际尘埃等，都围绕着太阳公转，而太阳则围绕着银河系的中...
2020-05-16 11:29:19
2066
原创 SVG_18_a标签_clipPath标签_限制路径效果
知识点： <a>标签 <clipPath>标签 先说a标签使用 SVG 的锚元素 (<a>) 定义一个超链接。由于这个元素和 HTML 的 <a> 标签使用了相同的标签名，当使用 CSS 或 querySelector 选择"a"时，可能应用到错误的元素上。可以尝试使用@namespace规则来区分两者。a标签中值得一提的是 target="_blank"属性，表示在新的页面打开标签中的链接地址。如果不设置target属...
2020-05-16 11:25:42
503
原创 SVG_17_留言栏摇摆_地震
这篇文章本该2020年5月12日发出的，奈何工作太忙，没来得及发出，但公众号准时发文了。原理：利用动画animate控制svg的高度，在指定时间内变换高度即可达到效果。点击下方链接查看效果公众号_Xi说SVG_SVG_17_留言栏摇摆_地震Xi说孔方兄认证...
2020-05-16 11:22:41
184
1
原创 SVG_16_defs标签_use标签_style标签_红绿灯效果
知识点： defs标签 SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用<use>元素呈现这些元素。 use标签 通过defs定义好被引用的标签或标签组后，再使用use标签进行引用。use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM...
2020-05-16 11:16:37
1533
转载 IE浏览器设置记住OA用户名和密码的方法
原文地址：https://www.78oa.com/help/help800.html感觉写的非常详细，遂转载。在确保个人电脑制只有自己数据比较安全的情况下可以在浏览器中设置记住OA的用户名和密码，这样每次在登录OA时不用再重复输入用户名和密码。 点击IE浏览器菜单栏上的“工具”——“Internet选项”——“内容”，找到自动完成，点击“设置”。 从弹出的对话框里勾选“表单上的用户名和密码”的选项，点击确定。 点击“常规”，在浏览历史记录里查看是否勾选了“退出时删除浏.
2020-05-15 10:40:47
5891
原创 SVG_13_14_15_套图展示_你看我漂亮吗_斗罗大陆史莱克七怪
SVG_13、14、15在公众号：Xi说SVG里面是发了三篇文章的，在CSDN里面，由于无法展示效果，所以集合在一篇文章里面了。实现原理：svg定制了click事件，当点击时，控制图片的隐藏显示达到效果。大家可以灵活应用。上效果图你看我漂亮吗？！点击后，出现眼部放大，眼睛中出现的两个字，有必杀效果。可以到公众号查看文章，然后转到自己朋友圈，或者发送给欠你钱的人，问问他们，图中的美女是不是很漂亮？！ 哈哈。。。SVGSVG斗罗大陆-史莱克七怪作为斗罗...
2020-05-09 10:59:28
1700
原创 SVG_12_动画专题之标签：animateMotion
写在前面：动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇为第三篇文章，其他还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。另外两篇：SVG_10_动画专题之标签：animate我的理解：animate是控制控件自身属性的。SVG_11_动画专题之标签：animateTransform我的理解：a...
2020-05-07 16:02:16
3661
原创 SVG_11_动画专题之标签：animateTransform
写在前面：动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇为第二篇文章，其他还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。上一篇：SVG_10_动画专题之标签：animate这个animateTransform标签，其实之前有一篇文章有讲过，但站的角度不同，想查阅的，点击跳转查看：SVG_8_CSS-...
2020-05-05 10:36:57
1266
原创 SVG_10_动画专题之标签：animate
写在前面：动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇文章开始，接下来还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。比如，有一个需求，是把一个球移动到另一端，移动方式可随意指定，用<a...
2020-05-05 08:40:50
2183
原创 SVG_9_线性颜色渐变_竖排文字_动画
知识点： linearGradient线性颜色渐变 text竖排文字-writing-mode animateMotion动画 先来说说text竖排文字，text默认是横排的，那怎样要竖排呢，其实很简单，就是一个属性的设置。垂直字体设置writing-mode属性设置为tb即可。writing-mode="tb"在text标签中，添加writin...
2020-05-04 15:51:53
1180
3
原创 SVG_8_CSS-animation_SVG-animateTransform标签_动画解析
知识点： CSS中使用animation控制动画效果； SVG中使用animateTransform标签控制动画效果； PS：虽然两者写法上稍微有点区别，但原理上是一致的；一，先来说说CSS中的控制方法。<style> #svg { width: 1500px; height: 400px; background: url...
2020-05-04 09:03:43
1297
原创 SVG_6_矢量图_transform_animateTransform_豚_鼠？
PS：补一下SVG_6，本来6是另一个功能介绍，素材没整理好，算是错过，后面再介绍。知识点：一，transform，这不是控件，只是一个属性，但功能强大，支持位移、缩放、旋转。二，animateTransform标签，这是一个控件。使用时，最好用<g>标签单独控制想要是用动画的控件，否则会使整个画布都动画起来。一般用法：旋转属性就像：rotation(t...
2020-05-01 20:08:12
584
原创 SVG_7_矢量图_Xi说孔方兄出品-官方LOGO
以后的文章，都会默认带出这个“出品LOGO”锚点LOGO代码如下，引用了网上的背景图片，其实就是把图片上传到公众号资源库，然后引用即可。<svg xmlns="http://www.w3.org/2000/svg" style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/kLwGw8KricxM...
2020-05-01 14:12:29
516
原创 SVG_5_矢量图_Path标签_弧线世界开启
知识点： path标签 path标签中的d属性用来控制path坐标，d属性中有不少特殊的“大写字母”，这些“大写字母”用来控制。其实这些字符还有“小写字母”。至于两者的区别是：“大写字母”是绝对坐标，“小写字母”是相对坐标。M：用来表示线条的起点；放在一组坐标点之前L ：用来表示连接线；H：用来表示X轴水平线，用path的H和V能快速画出阶梯状图形；V：用来表示Y轴垂直线...
2020-05-01 08:46:19
515
原创 SVG_4_矢量图_polyline_polygon标签_百度地图测距功能实现
知识点： polyline折线标签 polygon多边形标签 区别就是一个是非闭合，一个是闭合的。 polyline标签 虽然可以直接用line标签首尾相接画出折线，但是这样有一个缺点，就是折线交接处，会有空缺，感觉像拼接的一样，体验很差劲。而是用polyline标签，会完美衔接，可看下图中的三个折线交接处，对比很明显。但polyl...
2020-04-29 10:20:28
884
原创 SVG_3_矢量图_<g>_<text>_<image>
知识点梳理：1，<g>标签：分组标签、容器标签；2，<text>文字标签，文字水平垂直居中；3，style="cursor:pointer":控制显示手型；4，<image>标签：通过xlink:href=""引用图片；下面逐一介绍： <g>标签 <g>标签是一个容器标签，用来整合多个元素标签...
2020-04-28 21:19:17
695
1
原创 SVG-矢量图-奥运五环及奥迪标志
SVG继续基础玩法。知识点一：style属性可以快速填写部分对应的值，但不是所有值都可以这样写。知识点二：fill属性用来表示填充色，transparent表示透明，这可以实现空心圆。<svg xmlns="http://www.w3.org/2000/svg" enable-background="gray"> <circle cx="100" cy="...
2020-04-27 23:45:41
1276
原创 什么是SVG？及SVG引入方式
如题，什么是SVG呢？百度百科答：SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以...
2020-04-27 23:43:46
2641
原创 SVG_1_人脸
第一篇SVG效果文章上面的“人脸”，是使用EditPlus敲出来的，刚开始玩SVG，只弄了几个静态图形混搭，见笑。PS：使用135编辑器，感觉很蹩脚，转换后再发送到微信公众号，出来显示样式尺寸会有影响，甚至还会丢失控件，我真了个去，期间过程真的蹩脚，希望公众号本身能支持。...
2020-04-27 23:42:23
329
原创 战疫情，共抗时艰！
我们不出门，我们在家远程办公。我们不出门，我们在家业余零碎时间赚钱；战疫情，我们一起在家做贡献，共抗时艰！武汉加油，湖北加油，中国加油！！！...
2020-02-07 15:22:18
331
原创 孔方兄，何许人也？
孔方兄，何许人也？其实除了工作上学到了很多，私下里我也没闲着，学金融理财、学高效表达、学产品设计、学用户增长/留存、学项目管理，一直在充实自己。下面进入正文：据此号，后自称孔方兄。冀南邯郸人士，打小随父母京师闯荡。幼年在京师大兴学堂苦读，班级/年级颇有同阶无敌之感。后由户籍政策，打回原籍赶考，深受两地差异教学之荼毒，故大考前三年荣光不在，浑浑噩噩，...
2020-01-27 14:28:35
452
原创 Xi说孔方兄之名字由来
Xi说孔方兄，为什么叫这个名字？原因有三，且看我一一道来。Xi说孔方兄 为微信公号名称，欢迎关注，改号主题为游戏赚钱。游戏赚钱，我是认真的 。Xi “戏”，即游戏；紧贴本号初衷，就是以游戏作为切入点开创此号。 “细”，即详细；每一个游戏技巧，都是我实践得出，并非胡诌，还请仔细阅读我的攻略，方能看清游戏本质。 “熙”，此代表我女儿，“熙”为我女儿名...
2020-01-26 22:42:00
378
转载 UID卡、CUID卡、FUID卡的区别
UID卡、CUID卡、FUID卡的区别UID卡(国外称GEN1)所有区块可被重复读写卡片ID可改且使用后门指令更改IDID可被重复修改响应后门指令(意味着可被使用后门指令检测是否为克隆卡的机器发现)CUID卡(国外称GEN2)所有区块可被重复读写卡片ID可改且使用普通写指令更改IDID可被重复修改不响应后门指令(意味着不容易被反克隆系统发现)FUID卡(国外称...
2020-01-13 16:34:59
11822
转载 传统的七大质量管理工具
原文：https://blog.csdn.net/m290345792/article/details/78979744前言传统的七大质量管理工具如下所示： 因果图 流程图 核查表 直方图 帕累托图 控制图 散点图因果图又称为石川图或鱼骨图，它把影响质量诸因素之间的关系以树状图的方式表示出来，使人一目了然，便于分...
2019-11-15 10:48:14
1177
转载 查看Windows系统的系统信息及开机、关机时间
原文：https://blog.csdn.net/wjw_java_android/article/details/79785319方式一： 在dos命令行输入：systeminfo进行查看；如：方式二：通过事件查看器查看1、打开计算机事件查看器： 开始》管理工具》事件查看器2、事件查看器打开后，就可以查看各种事件：《应用程序》、《系统》、《安全性》等各类事件3、关...
2019-10-28 10:58:44
653
企业介绍模板.pptx
2019-12-23
国密算法SM系列（全软件加密算法，没有SM1硬件加密算法）
2017-06-07
gson-1.6.jar
2014-01-03
纯种的左侧或上侧抽屉-SlidingDrawer实现
2013-08-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人