SVG
SVG矢量图,无损缩放
King·Forward
利用技术的沙粒,架起管理的高塔。
展开
-
SVG_42_开发SVG的编辑器之我使用过的IDE
知识点:本篇主简单叙述下我使用过的IDE,看下我都用过哪些IDE来开发SVG。 txt EditPlus Dreamweaver Visual Studio Code SVG Developer AdobeIllustrator 简称AI 还有不少在线编辑工具 txt是的,在写前几篇文章时,里面相关的SVG代码,我就是用txt写的,纯手工敲打出来。这种方式很锻炼功力,但效率是最低的。EditPlus这款增...原创 2020-06-06 16:45:51 · 598 阅读 · 0 评论 -
SVG_41_一篇10万+的文章效果_点击后展开画卷
这是一篇10万+阅读量的文章效果。由于排版问题,涉及不少工作量,先简单做个效果吧,排版比较费时间。点击图片后,可以向下拉开,拉开后的效果,由于时间仓促没有实现,只是单纯实现了这个下拉的效果。效果去公众号看吧Xi说孔方兄认证...原创 2020-06-06 16:44:21 · 1349 阅读 · 1 评论 -
SVG_40_path标签之字母S、T_平滑贝塞尔曲线
历史相关文章SVG_5_矢量图_Path标签_弧线世界开启SVG_18_a标签_clipPath标签_限制路径效果SVG_23_mpath标签_轨迹复用SVG_38_path标签之字母Q---二次贝塞尔曲线SVG_39_path标签之字母C_三次贝塞尔曲线又名立方贝塞尔曲线知识点:字母S和字母T的用法比字母Q和字母C简单,因为它假定第一个控制点是前一个控制点关于前一个点的反射,或者说如果没有前一个控制点的话它实际上就是前一个点字母T的句法是”S cx,cy x,y“:与前原创 2020-06-06 16:42:00 · 633 阅读 · 0 评论 -
SVG_39_path标签之字母C_三次贝塞尔曲线又名立方贝塞尔曲线
对于想要了解path标签其他字母属性和相关path使用的朋友,可以参看以下文章SVG_5_矢量图_Path标签_弧线世界开启SVG_18_a标签_clipPath标签_限制路径效果SVG_23_mpath标签_轨迹复用SVG_38_path标签之字母Q---二次贝塞尔曲线贝塞尔曲线百科贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可.原创 2020-06-06 16:40:15 · 1289 阅读 · 0 评论 -
SVG_38_path标签之字母Q_二次贝塞尔曲线
昨天的文章中用到了三次贝塞尔曲线--SVG_37_六一儿童节快乐-路径移动-火焰文字,那么接下来几篇文章围绕着贝塞尔曲线说明一下。相对于circle、rect、ellipse、polygon等固定的图形,在绘制曲线时,line是一条直线,polyline是折线,而path标签代表了圆滑。path标签可以很灵活的绘制各种图形,上面提到的各种标签,都可以使用path标签绘制出来。前面有文章对path进行了说明,如SVG_5_矢量图_Path标签_弧线世界开启SVG_18_a标签_clipPa原创 2020-06-06 16:37:53 · 1414 阅读 · 0 评论 -
SVG_37_六一儿童节快乐-路径移动-火焰文字
六一了,做个简单特效。实现原理:利用了火焰背景特效、textpath文字引用路径、路径移动特效和点击后的一个渐变。动态文字特效文章还有:SVG_30_火爆的Xi说SVG与孔方兄在看火烧赤壁SVG_31_温柔似水的Xi说SVG文字路径移动特效:知识点:除了笔直地绘制一行文字以外, SVG 也可以根据 <path> 元素的形状来放置文字。只要在textPath元素内部放置文本,并通过其xlink:href属性值引用<path>元素,我们就可以让文字块呈现在&l原创 2020-06-06 16:34:03 · 379 阅读 · 0 评论 -
SVG_36_搜索“svg”_公众号排名首页第五啦
RT如题,打开微信,在搜索框中搜索“svg”,点击公众号选项,在首页就可以看到“Xi说SVG”了,真的开森。这要是我2015年申请的、带有留言功能的那个号该多好,就能与大家多多互动了。这是我连续第36天更新SVG文章了,日更看着容易,真正做到,挺难的。对那些持续日更输出的大佬,真的佩服。虽然关注我的没多少朋友;虽然没有多少朋友点“在看”;虽然这个排行就算第一也并不代表什么;虽然我不是前端开发人员;尽管现实工作中正面临危机,但这危机也许是未来的一个机遇。以上种...原创 2020-06-06 16:28:29 · 319 阅读 · 0 评论 -
SVG_35_高仿B站弹幕
今天仿制B站的弹幕进行的制作请横屏观看实现原理: 通过控制文字的位移,是不是很简单。本文写于2020年5月29日23:38:05Xi说孔方兄认证原创 2020-06-01 21:52:41 · 251 阅读 · 0 评论 -
SVG_33_script脚本标签
知识点:script标签:一个SVG脚本元素等同于HTML中的script元素,因此这个位置是面向脚本的(例如,ECMAScript)。任何定义在script元素中的函数拥有一个跨当前文档的全局范围。本来我还想着,使用脚本控制的话,会更灵活。呐,今天script标签就来了。使用script标签,我们就可以编写各种脚本,实现各种点击、滑动等高交互性的操作了。其实之前把svg写在html文档中也是可以的,但我更喜欢单独.svg格式。以后更多的交互效果,期待。...原创 2020-06-01 21:43:27 · 551 阅读 · 0 评论 -
SVG_32_月儿弯弯变正圆
月儿弯弯变正圆这篇文章的原理其实和SVG_15_史莱克七怪是一样的,都是通过控制显示与隐藏的方法达到想要的效果。话说天下大势,合久必分,分久必合。月儿亦是如此,残月可以变满月,满月会变残月。多次点击,使残月变满月,再变残月为了展示效果,放置的GIF,想体验效果,可以去公众号看看。...原创 2020-06-01 21:36:56 · 211 阅读 · 0 评论 -
SVG_31_温柔似水的Xi说SVG
水火相依,今天水给你看原理:还是使用的pattern引用的gif动画,然后使用在文字上面实现。相关文档:SVG_24_pattern标签_使fill填充_stroke描边多姿多彩不同的gif实现的效果肯定是不一样的。Xi说孔方兄认证...原创 2020-05-24 22:00:16 · 154 阅读 · 0 评论 -
SVG_30_火爆的Xi说SVG与孔方兄在看火烧赤壁
这个效果是使用pattern加载一个燃烧的火焰图片形成的。关于pattern怎么使用,去看这篇基础文章:SVG_24_pattern标签_使fill填充_stroke描边多姿多彩本篇算是pattern的一个简单应用,后面更精彩!Xi说孔方兄认证...原创 2020-05-24 21:57:27 · 215 阅读 · 0 评论 -
SVG_29_径向渐变radialGradient
知识点:radialGradient 用来定义径向渐变,以对图形元素进行填充或描边。说人话,就是定义辐射性渐变,就是以一个点为圆心,向周围进行颜色渐变。前面有文章讲解了线性渐变,有兴趣的可以点击查看:lineGradient线性渐变-- SVG_9_线性颜色渐变_竖排文字_动画使用radialGradient的方式与使用lineGradient的方式一样,都是在defs标签中定义的,然后通过url(#id)的方式进行引用。不仅可以用在fill填充,还可以应用在stroke描边上。这里其实和另一个原创 2020-05-24 21:55:28 · 1172 阅读 · 0 评论 -
SVG_28_悟空_旋转的金箍棒
点击金箍棒看看效果在公众号可以自主操作,为在CSDN中展示效果,还是用gifXi说孔方兄认证原创 2020-05-24 21:52:48 · 179 阅读 · 0 评论 -
SVG_27_指尖魔法_等你施法_斗罗大陆史莱克七怪_闪亮登场
作为斗罗大陆粉丝,在使用图片时,自然考虑到史莱克七怪。图片暗黑化是使用PS简单调整了下曲线,比较丑,见笑。好了,废话不多说,看效果。Q:暗黑的是不是不好看?A:你指尖有魔法,点击一下变好看吧。不管认不认得他们,释放一点指尖魔法看看。实现原理其实很简单:就是利用animate控制透明度opacity。开灯后,有没有刺眼的感觉,让我们一起施法开灯。...原创 2020-05-24 17:10:03 · 413 阅读 · 0 评论 -
SVG_26_SVG的灵活运用
今天不发效果图了,来聊一聊SVG的灵活运用。这篇文章好几天前就看到了,思前想后,感觉还是说一下,毕竟这个脑回路还是很赞的。具体是怎么回事呢?有个程序猿想写一个监控服务器的网页,想着能不能用小程序实现。按照规定,小程序请求地址必须在开发信息中手动报备并且要求域名备案。而这位想实现可以动态添加节点,并且通过小程序直接连接到服务器,不经过第三方服务器。然后就想到了使用SVG实现小程序和服务器的点对点连接。原理是巧妙运用了小程序 image 组件的 bindload 接口,当图片加载成功时会返回原创 2020-05-24 16:39:55 · 201 阅读 · 0 评论 -
SVG_25_520
今天是个好日子。本篇文章公众号发文时间为:2020年5月20日5:20也算是我业余时间玩SVG的一个小里程碑。(原因:算是掌握了在公众号文章发布效果的技巧,摸了好多天呐)。以后将会有更多更好的效果展示出来,耶!Xi说孔方兄认证...原创 2020-05-24 16:37:26 · 190 阅读 · 0 评论 -
SVG_24_pattern标签_使fill填充_stroke描边多姿多彩
知识点 pattern标签 定义:使用预定义的图形对一个对象进行填充或描边,就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复(或平铺)从而覆盖要涂色的区域。先使用pattern元素定义图案,然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。重点:使用pattern,可以指定各种各样的样式,然后把样式应用到fill填充或者stroke描边中,使控件多彩炫目pattern定义好的一个样式,在应用到其他控件中时,会自动平原创 2020-05-18 16:03:12 · 1241 阅读 · 0 评论 -
SVG_23_mpath标签_轨迹复用
知识点: mpath标签 定义:<animateMotion> 元素的mpath子元素使<animateMotion> 元素能够引用一个外部的<path>元素作为运动路径的定义。下方的指示箭头是利用mpath标签画好路线轨迹,然后其他控件通过animateMotion的mpath子元素引用,达到使多个控件同一运动模式的目的。Xi说孔方兄认证...原创 2020-05-18 16:01:33 · 548 阅读 · 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 · 1855 阅读 · 0 评论 -
SVG_21_逐行展示_观沧海
今天做了一个逐行展示的效果,一行行的显示,主要使用了animate标签,其中每一个animate标签都是指id,然后下一个animate的begin=“上一个id.end”,然后fill="freeze"表示按照动画结尾的效果冻结。看效果:PS:有了GIF加成,再也不用等视频审核了。效果被吞,关门,放GIFXi说孔方兄认证...原创 2020-05-16 11:33:47 · 327 阅读 · 0 评论 -
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 · 262 阅读 · 0 评论 -
SVG_19_太阳_地球_月亮_三球仪_自转_公转
公众号原文:公众号_Xi说SVG_SVG_19_太阳_地球_月亮_三球仪本次实现的三球仪,太阳、地球、月亮都是有自转效果的,地球和月亮也都有自己的公转。我定义了渐变色来显示出三颗球体的自转,但由于在文章中展示不出效果,所以改为了纯色,视频中是渐变色的效果,可查看。简单来个知识普及:太阳(太阳系的中心天体)太阳是太阳系的中心天体,占有太阳系总体质量的99.86%。太阳系中的八大行星、小行星、流星、彗星、外海王星天体以及星际尘埃等,都围绕着太阳公转,而太阳则围绕着银河系的中...原创 2020-05-16 11:29:19 · 2030 阅读 · 0 评论 -
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 · 477 阅读 · 0 评论 -
SVG_17_留言栏摇摆_地震
这篇文章本该2020年5月12日发出的,奈何工作太忙,没来得及发出,但公众号准时发文了。原理:利用动画animate控制svg的高度,在指定时间内变换高度即可达到效果。点击下方链接查看效果公众号_Xi说SVG_SVG_17_留言栏摇摆_地震Xi说孔方兄认证...原创 2020-05-16 11:22:41 · 153 阅读 · 1 评论 -
SVG_16_defs标签_use标签_style标签_红绿灯效果
知识点: defs标签 SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用<use>元素呈现这些元素。 use标签 通过defs定义好被引用的标签或标签组后,再使用use标签进行引用。use元素在SVG文档内取得目标节点,并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM...原创 2020-05-16 11:16:37 · 1494 阅读 · 0 评论 -
SVG_13_14_15_套图展示_你看我漂亮吗_斗罗大陆史莱克七怪
SVG_13、14、15在公众号:Xi说SVG里面是发了三篇文章的,在CSDN里面,由于无法展示效果,所以集合在一篇文章里面了。实现原理:svg定制了click事件,当点击时,控制图片的隐藏显示达到效果。大家可以灵活应用。上效果图你看我漂亮吗?!点击后,出现眼部放大,眼睛中出现的两个字,有必杀效果。可以到公众号查看文章,然后转到自己朋友圈,或者发送给欠你钱的人,问问他们,图中的美女是不是很漂亮?! 哈哈。。。SVGSVG斗罗大陆-史莱克七怪作为斗罗...原创 2020-05-09 10:59:28 · 1644 阅读 · 0 评论 -
SVG_12_动画专题之标签:animateMotion
写在前面:动画是最直观的表达方式,比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻,最过目不忘的友好表达方式,从本篇为第三篇文章,其他还有两篇讲述动画,共计三篇动画文档,满足动画你对动画渴求。另外两篇:SVG_10_动画专题之标签:animate我的理解:animate是控制控件自身属性的。SVG_11_动画专题之标签:animateTransform我的理解:a...原创 2020-05-07 16:02:16 · 3612 阅读 · 0 评论 -
SVG_11_动画专题之标签:animateTransform
写在前面:动画是最直观的表达方式,比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻,最过目不忘的友好表达方式,从本篇为第二篇文章,其他还有两篇讲述动画,共计三篇动画文档,满足动画你对动画渴求。上一篇:SVG_10_动画专题之标签:animate这个animateTransform标签,其实之前有一篇文章有讲过,但站的角度不同,想查阅的,点击跳转查看:SVG_8_CSS-...原创 2020-05-05 10:36:57 · 1213 阅读 · 0 评论 -
SVG_10_动画专题之标签:animate
写在前面:动画是最直观的表达方式,比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻,最过目不忘的友好表达方式,从本篇文章开始,接下来还有两篇讲述动画,共计三篇动画文档,满足动画你对动画渴求。动画元素放在形状元素的内部,用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里,属性从开始值变成结束值。比如,有一个需求,是把一个球移动到另一端,移动方式可随意指定,用<a...原创 2020-05-05 08:40:50 · 2114 阅读 · 0 评论 -
SVG_9_线性颜色渐变_竖排文字_动画
知识点: linearGradient线性颜色渐变 text竖排文字-writing-mode animateMotion动画 先来说说text竖排文字,text默认是横排的,那怎样要竖排呢,其实很简单,就是一个属性的设置。垂直字体设置writing-mode属性设置为tb即可。writing-mode="tb"在text标签中,添加writin...原创 2020-05-04 15:51:53 · 1095 阅读 · 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 · 1278 阅读 · 0 评论 -
SVG_6_矢量图_transform_animateTransform_豚_鼠?
PS:补一下SVG_6,本来6是另一个功能介绍,素材没整理好,算是错过,后面再介绍。知识点:一,transform,这不是控件,只是一个属性,但功能强大,支持位移、缩放、旋转。二,animateTransform标签,这是一个控件。使用时,最好用<g>标签单独控制想要是用动画的控件,否则会使整个画布都动画起来。一般用法:旋转属性就像:rotation(t...原创 2020-05-01 20:08:12 · 541 阅读 · 0 评论 -
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 · 501 阅读 · 0 评论 -
SVG_5_矢量图_Path标签_弧线世界开启
知识点: path标签 path标签中的d属性用来控制path坐标,d属性中有不少特殊的“大写字母”,这些“大写字母”用来控制。其实这些字符还有“小写字母”。至于两者的区别是:“大写字母”是绝对坐标,“小写字母”是相对坐标。M:用来表示线条的起点;放在一组坐标点之前L :用来表示连接线;H:用来表示X轴水平线,用path的H和V能快速画出阶梯状图形;V:用来表示Y轴垂直线...原创 2020-05-01 08:46:19 · 494 阅读 · 0 评论 -
SVG_4_矢量图_polyline_polygon标签_百度地图测距功能实现
知识点: polyline折线标签 polygon多边形标签 区别就是一个是非闭合,一个是闭合的。 polyline标签 虽然可以直接用line标签首尾相接画出折线,但是这样有一个缺点,就是折线交接处,会有空缺,感觉像拼接的一样,体验很差劲。而是用polyline标签,会完美衔接,可看下图中的三个折线交接处,对比很明显。但polyl...原创 2020-04-29 10:20:28 · 859 阅读 · 0 评论 -
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 · 622 阅读 · 1 评论 -
SVG_1_人脸
第一篇SVG效果文章上面的“人脸”,是使用EditPlus敲出来的,刚开始玩SVG,只弄了几个静态图形混搭,见笑。PS:使用135编辑器,感觉很蹩脚,转换后再发送到微信公众号,出来显示样式尺寸会有影响,甚至还会丢失控件,我真了个去,期间过程真的蹩脚,希望公众号本身能支持。...原创 2020-04-27 23:42:23 · 291 阅读 · 0 评论 -
什么是SVG?及SVG引入方式
如题,什么是SVG呢?百度百科答:SVG是一种图形文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以...原创 2020-04-27 23:43:46 · 2583 阅读 · 0 评论 -
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 · 1236 阅读 · 0 评论