标签:svg

HTML5

前端网页截图:Canvas截图 vs SVG截图

herman 4年前 (2020-02-04) 4539浏览

如今很多网站都引入截图功能,可用于问题反馈、内容分享等实用需求,而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式,虽然有些局限,但是也能应付大部分项目需求。 Canvas截图:html2canvasSVG截图:rasterize...

HTML5

SVG 图像入门教程

herman 6年前 (2018-08-07) 2294浏览 0评论

一、概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少...

HTML5

svg 实现3选项按钮

herman 6年前 (2018-02-07) 1975浏览 0评论

CSS3 能实现很好看的按钮动画效果,SVG 也可以实现。今天为大家分享一款基于 SVG 实现的3个选项切换按钮(滑块按钮)。 这是一款比较特别的开关切换按钮,与之前分享的很多CSS3开关切换按钮不同,这款是基于SVG和HTML5的,它的最...

HTML5

jspaint 教程

herman 6年前 (2018-01-24) 3478浏览 0评论

jspaint 是一个类似 Windows 画图的软件。和 Windows 画图不同的是,jspaint 是一个 web 版的绘图软件,可以媲美美图秀秀软件。 jspaint 目前已开源在 github 上。截止目前 star 已超过 27...

HTML5

CSS3+SVG实现带秒针的复古圆盘表盘时钟

herman 6年前 (2017-12-30) 4484浏览 0评论

模仿时钟走的动画网上也有很多,但是复古形式的不是很多。今天就借助 CSS3 和 SVG 给大家制作一款带秒针的圆形时间表时钟动画。 在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到...

HTML5

使用clip-path实现任意元素的碎片飞入动画效果

herman 6年前 (2017-11-30) 3549浏览 0评论

clip-path 是CSS3 中的一个属性。该属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg,或者定义路线的方法例如circle()。clip-path属性代替了现在已经弃...

HTML5

animateplus.js 教程

herman 6年前 (2017-11-29) 3876浏览 0评论

animateplus(Animate Plus)是一个基于现在的网络的动画模块。Animate Plus是一个专注于性能和创作灵活性的JavaScript动画库。它的目标是提供稳定的60 FPS,重量小于2 KB(缩小和压缩),使其特别适合移动...

HTML5

CSS mask-image属性详细介绍

herman 6年前 (2017-11-18) 6237浏览 0评论

CSS mask遮罩属性的历史非常久远了,远到比CSS3 border-radius等属性还要久远,最早是出现在Safari浏览器上的,差不多可以追溯到09年。 不过那个时候,遮罩只能作为实验性的属性,做一些特效使用。毕竟那个年代还是IE浏...

HTML5

js2flowchart.js 教程

herman 6年前 (2017-11-11) 5013浏览 0评论

js2flowchart.js是一个可以将任何JavaScript代码转换成漂亮的SVG流程图的可视化库。该插件目前已开源到github,有超过1300多个star。本文介绍js2flowchart.js的相关教程。 js2flowchar...

HTML5

SVG实现多彩圆环倒计时效果

herman 6年前 (2017-11-11) 2562浏览 0评论

圆环倒计时我们经常见到,实现的方法也有很多种。但是本文将介绍一种全新的实现方式,使用SVG来实现倒计时功能。 本文主要用到了SVG的stroke-dasharray和stroke-dashoffset特性。下图是倒计时运行效果: ...

HTML5

SVG 图表插件 charts 教程

herman 6年前 (2017-11-03) 3903浏览 0评论

frappe 是一个简单,敏感,现代的SVG图表插件,具有零依赖性,即它可以单独使用,不依赖其他任何js库。本文介绍它的用法。 目前 frappe charts 在 github 上已有4000多颗星。 安装 frappe 的安...

HTML5

svg-to-react 教程

herman 7年前 (2017-11-01) 3020浏览 0评论

将 SVG 转换为 React 组件除了 SVGR,还有很多其他js插件。比如我们今天要学习的 svg-to-react。本文将介绍 svg-to-react 的相关用法。 和 SVGR 相比 svg-to-react 更简单,当然支持的功...

HTML5

svgr 简介

herman 7年前 (2017-10-31) 3480浏览 0评论

百度搜索了一下 SVGR ,结果没搜索到一条相关的内容。因此我决定写一系列关于 SVGR 教程的文章,本文是第一篇,SVGR 入门简介篇。 svgr 是一个将SVG转换为React组件,svgr 由 JavaScript 实现。整个文档也非...

HTML5

cufon-yui.js 实战

herman 7年前 (2017-10-30) 3717浏览 0评论

简单的说,Cufon是一个用来替代sIFR(更早期的一种自定义字体实现方案)框架,实现在网页中对文字字体进行渲染功能的纯JavaScript开源类库。其基本原理是借助于浏览器所推出的专有页面绘画方案,如 VML、Canvas 和 SVG 等,在网...

HTML5

svg转换canvas的canvg插件使用详解

herman 8年前 (2016-02-25) 9561浏览 0评论

最近在使用svg和canvas绘制电信的网络拓扑图,遇到了一些困难。同时论坛中也有不少网友在提问类似的帖子。今天我就为大家推荐一些做法,主要借鉴和采用网上的一些开源框架进行开发!推荐一些框架,如:jtopo、D3.js、Qunee(收费)、Gra...