1.简介 今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。 2.SVG简介 svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像...[2024/8/7]

请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 I ue 哟~ github源码 gitee源码 示例地址 另存为SVG 这一章增强了另存为的能力，实现“另存为SVG”，大概是全网唯一的实例分享了吧。 灵感来源：react-konva-cust...[2024/5/8]

最近，群里在讨论一个很有意思的线条动画效果，效果大致如下： 简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。 本文，我们将一起探索，看看在不使用 JavaScript/Canvas 的基础上，使用纯 CSS/SVG 的方式，我们可以如何大致的还原上述的线...[2024/5/6]

原生的渐变方法 在SVG中提供的原生渐变方法有两种，分别为线性渐变linearGradient和径向渐变radialGradient。我们以一个稍微复杂的路径来作为模板，为其添加两种渐变效果： <svg width="800" height="300"> <defs&...[2024/2/18]

前言 SVG对不少前端来说就是一个熟悉的陌生人，此篇博客是我学习完SVG后做的一个小总结，帮助我快速回忆SVG相关内容。 它不能帮你精通 SVG，但是可以帮你快速了解SVG的一些核心内容，不会迷失在一些细枝末节的设定中，让你对 SVG 有一个大概的认识。 基础 SVG，全名 Scalable...[2022/11/17]

目录介绍演示正文绘制背景拉杆绘制生成条带数字转动 介绍 之前在抖音上看的某个脑洞大开的产品设想的几种别具特色的后端看了抓狂前端看了想打人的阴间交互效果，其中一个脑洞是让用户拉一下拉杆如同抽奖的形式获取到验证码，本期就咱们就还原出这个交互效果看看它到底有多疯狂。 演示 效果就是这样喵...[2022/7/25]

　　最新有个功能需要截取网页成图片，于是用到比较流行的html2canvas，本来以为能顺顺利利的搞定，后来发现网页上的流程图连接线不在截图中。于是各种百度、bing，也搜到好多，但是感觉没有一个完整的代码，现在自己解决了，分享下代码。 　　首先需要下载canvg.js，github地址：ht...[2021/6/7]

最终效果如下: 动画分成两步 制定运行轨迹 创建DOM并按照轨迹动画 制定运行轨迹 我们先要画一条底部的淡蓝色半透明路劲做为能量流动的管道 这里用SVG的path去做(其实这里可以直接用背景图), 代码如下: <!-- 代码是用...[2021/3/8]

SVG近几年因各种优势被大量的应用，遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG，这使得SVG的灵活性大大下降，大多数人选择放弃在微信小程序中使用SVG图标方案。 那么，真的就没有办法在微信小程序中愉快的使用SVG图标了吗？我们先来分析一下，对于使用SVG图标我们有哪些需求： ...[2021/3/8]

本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。 最近产品上需要做一个这样的功能：给一些图形进行染色处理。想想这还不是顺手拈来的事情，早就研究过图形染色的技术。于是我把之前写好的两种算法发给了小伙伴，让他参照实现，第一种算法是操纵像...[2019/7/11]

一根矢量的波浪 <svg viewBox="0 0 560 20" cla ="wave-animation__water-wave wave-animation__water-wave--front"> <use x...[2019/7/3]

我经常思考，在面临一个不确定问题时，以往的经验究竟有无辅助作用？如果把经验遗忘会产生何种程度的影响？在上下求索未果之后，如何找回曾经的感觉，恰若灵光一现？凡此种种，终是要思考总结的，这篇文章便是我的反思之作。 本篇文章会记述一些实用的svg与png之间的转换技巧并强调一种思考原则。 概述 ...[2019/5/5]

今天，小程序正式支持 SVG 写在前面 经过腾讯 Omi 团队的努力，今天你可以在小程序中使用 Cax 引擎高性能渲染 SVG！ SVG 是可缩放矢量图形(Scalable Vector Graphics)，基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是...[2019/4/22]

　　前一段项目中用到了svg图片就和其他的元素一样 直接引用就可以展示在页面上，因为项目紧张没有仔细的研究，最近在扩展自己的基础知识，偶然看到了这个东西，于是总结了一些博客园中关于这个svg的基础知识，只是自己基础的理解，没有更深层次的理解，但是并不想作大自然的搬运工，只是想把自己理解到的和大家分...[2019/1/29]

代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势： SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压...[2019/1/14]

1、基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标。 本文以vue项目为例，当然在react中的使用原理基本相似。 svg图标可以直接通过img标签来使用，也可当做icon来使用。 本文是参考了鑫旭大佬的文章：SVG Sprite技术介绍。 2、配置 安装svg-s...[2018/12/3]