程序员经验分享-hwhale

像蜗牛一样在路径上进行 SVG 动画

2023-12-04

I have the following SVG and I would like to draw the circles pixel by pixel on the path after moveing. It's like when the snail goes he let a streak behind him. So my question is how to draw the light red circles? Snail effect

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 200" id="svgBox" style="background-color:#e4e4e4">
    <path d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449L10,10" stroke="grey" stroke-width="1" fill="none" id="animateMotion"/>
    <circle cx="" cy="" r="5" fill="red">
        <animateMotion dur="6s" repeatCount="0">
            <mpath xlink:href="#animateMotion"/>
        </animateMotion>
    </circle>
</svg>

例如，您可以执行以下操作：

.path {
  stroke-dasharray: 1230;
  stroke-dashoffset: 1230;
  animation: snail 6s linear forwards;
}

@keyframes snail {
  to {
    stroke-dashoffset: 0;
  }
}
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 200" id="svgBox" style="background-color:#e4e4e4">
        <path class="path" d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449L10,10" stroke="pink" stroke-width="12" fill="none" id="animateMotion"/>
        <circle cx="" cy="" r="5" fill="red">
            <animateMotion dur="6s" repeatCount="0">
                <mpath xlink:href="#animateMotion"/>
            </animateMotion>
        </circle>
    </svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

Animation

SVG

svganimate

像蜗牛一样在路径上进行 SVG 动画 的相关文章

  • 固定长度的随机数

    我想生成一个 0 9 数字且长度 5 的随机整数 我尝试这样做 function genRand min max for var i 1 i lt 5 i var range max min 1 return Math floor Math

  • 如何识别当前打开的每个单独的浏览器窗口？

    如何使用 javascript 唯一地识别当前为所有主要浏览器打开的每个单独的浏览器窗口 让我解释一下我需要了解的内容 并考虑以下场景 我有 3 个当前打开的浏览器窗口 任何现代浏览器 即 Chrome Firefox 等 每个窗口都包含多

  • 为什么用 < 对 JS 数字数组进行排序有效？

    在 JavaScript 中对数字数组进行排序时 我不小心使用了 lt 代替通常 https stackoverflow com questions 1063007 how to sort an array of integers corr

  • 如何将 CAD (DWG) 文件转换为 GeoJSON？

    我正在使用 OpenLayers 需要将 DWG 文件转换为 GeoJSON 格式 我怎样才能做到这一点 事实上 GDAL 拥有完成此任务所需的工具 ogr2ogr 是 GDAL 中包含的一个程序 可以转换多种格式 https gdal o

  • 当按下 html 键盘按钮时，将文本添加到输入字段（具有焦点的字段）

    我使用 HTML 创建了一个屏幕键盘 div and a 标签 页面上有六个文本输入 名字 昵称 姓氏 注释 过敏 手机号码 我不太擅长 JS 但如果页面上只有一个输入 我确实知道该怎么做 但我不确定当有多个输入时该怎么做 我遇到的问题之一

  • 获得焦点时如何移动文本框视口？

    我有一个文本框 其中可能包含大于文本框大小的字符串 当我打字时 文本框 视口 总是移动以显示我输入的最后一个字符 例如 当您在 SO 问题中写下一个非常大的标题时 A 问题是 如果文本框失去焦点 当它再次聚焦时 视口总是设置在文本的开头 而

  • jQuery：在 jQuery 对象中存储附加/额外的数据/信息？

    在 jQuery 对象中存储额外的数据是否可能且明智 现在我有包含一些数据的对象 但这些对象也有该数据的视觉表示 这可行 但我有很多代码来保持它们同步 例如 如果您从 dom 中删除一个对象 我还必须从对象数组中删除相关对象 删除相当简单

  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions

  • 如何将身份验证详细信息传递给 iframe 内的应用程序？

    我有一个网页 想在其中显示詹金斯的网页 因此使用iframe like But http xxx xxx xx xx 8080 view Nightly 20Builds 20 打开登录页面 因此无法直接显示内容 其实我想在没有登录的情况下

  • 是否可以加载本地版本的 JavaScript 文件而不是服务器版本？

    只是有一个简单的问题要抛出 看看是否有解决方案 假设我无法访问服务器 我加载一个网页 发现他们有一个从子文件夹加载的 Javascript 文件 比方说 scripts js some js 现在 我想在本地对此文件进行更改 并针对整个站点

  • 解密签名并验证 JWT

    我知道还有其他库可以让我更轻松地使用 JWT 在 Node js 中 在本例中 我使用 crypto js 以手动方式学习 JWT 以下给了我令牌 var header alg HS256 typ JWT var wordArrayHead

  • 使用 javascript/jquery 检查 .css 样式表的名称

    我正在尝试为论坛制作一个小 chrome 扩展 但我只希望它在论坛的某个区域中工作 问题是我不能只做 matches subforum 因为该论坛中的线程无法通过 URL 区分它们所在的子论坛 subforum 有自己的 css 样式表 所

  • onbeforeunload 或单击浏览器后退按钮需要帮助

    如果用户单击浏览器的后退按钮 那么我希望出现提示并要求确认 如果用户单击 确定 那么它应该导航到xx html 如果用户单击 取消 则应阻止导航 我怎样才能做到这一点 注意 我已经尝试过onbeforeunload方法 但它适用于所有导航操

  • this 关键字是构造函数中的窗口对象

    好吧 所以我以为我理解了这一点 没有双关语的意思 但显然不是 var Constructor function var internalFunction function return this window this myMethod f

  • 在 Promise 中中止 ajax 请求

    我正在构建一个表单验证并学习承诺 我决定使用承诺模式实现异步验证函数 var validateAjax function value return new Promise function resolve reject ajax data

  • Internet Explorer 10，最大 div 大小为 1.533.917 像素

    我需要制作一个非常大的 div 以百万像素为单位 搜索我发现这个线程证明 IE 可以管理最多 10 000 000 px 确定最大可能的 DIV 高度 https stackoverflow com questions 7719273 de

  • 在 Node.js 中封装 require 可以解决相对路径调用

    我正在尝试创建一个 require 包装器来加载依赖项 但我发现很难让它像原始的 require 函数一样工作 当路径是相对路径时 包装器无法解析为正确的路径 因为我的加载程序和调用程序文件不在同一文件夹中 这是一个简化的描述 index

  • Angular JS：当我们已经有了具有作用域的指令控制器时，指令的链接函数需要什么？

    我需要对范围和模板执行一些操作 看来我可以在以下任何一个中做到这一点link函数或controller函数 因为两者都可以访问该范围 什么时候我必须使用link功能而不是控制器 angular module myApp directive

  • 使用 Javascript 编辑和保存用户 HTML - 安全性如何？

    例如我有一个Javascript 支持的表单创建工具 您可以使用链接添加元素的 html 块 如输入字段 并使用 TinyMCE 来编辑文本 这些是通过自动保存功能保存的 该功能在特定事件的后台执行 AJAX 调用 被调用的保存函数负责数据

  • Origin 无权使用地理定位服务 - 即使通过 HTTPS

    我有一个通过 HTTPS 使用 HTML5 地理定位的网页 它在桌面浏览器上运行良好 然而 在 iOS Safari 上 我收到错误 Origin 无权使用地理定位服务 我已确保页面上的所有内容都通过 HTTPS 加载 每个图像 每个脚本和

随机推荐

  • 使用 XIB 文件加载 UITableViewCell 子类

    我无法获取我的CustomTableViewCell 一个子类UITableViewCell出现在我的表格视图中 我使用 xib 来表示该单元格 但我假设数据源委托的代码不会更改 我确保在表视图单元 XIB 内设置相同的重用标识符 我将问题

  • 使用 gsub() 删除 R 中字母之间多余的空格

    关于如何删除单词之间多余的空格 有很多答案 这非常简单 但是 我发现删除多余的空格within言语要困难得多 作为一个可重现的示例 假设我有一个如下所示的数据向量 x lt c L L C P O BOX 123456 NEW YORK 我

  • AssertionError：视图函数映射正在覆盖现有端点函数

    我不知道如何解决使用 Flask 时从 Python 代码中得到的这个问题 app route addEvent methods POST def addEvent app route deleteEvent methods POST de

  • 使用 R 中的 ggplot2 绘制带有单独椭圆的散点图中的点

    My dataset is formed by 4 columns as shown below 左边两列代表地理结构的坐标XY 左边两列代表 每个 地理单元的大小 南北直径和东西直径 我想以图形方式表示一个散点图 在其中绘制所有坐标并在每

  • vuejs3 I18n 和组合 API

    我现在正在 vueJS 中做一个前端界面 并且目前正在使用 vuejs 3 和 i18n i18n 的实现按正常方式工作得很好 但是当我想将它与组合 API 一起使用时 就会出现问题 所以我做了什么 我的 main js 看起来像这样 co

  • 图解分析器 - 如何将手臂添加到我的流程图中？

    对于我的流程图 我有一个详细说明数据流的垂直图表 然而 在向下的箭头上 我想添加侧箭头来描述丢失的数据的去向 我该怎么做呢 我在任何文档和示例中都看不到它 因为它往往涉及更复杂的事情 而且我知道这是一项非常基本的任务 library Dia

  • Maven循环依赖

    我有一个模块化的 Maven 项目 其中两个模块 BIZ 和 EJB 包含如下内容 PART OF BIZ Module public interface MyInterface public void foo public class I

  • 将参数传递给 JDBCPreparedStatement

    我正在尝试为我的程序制作验证类 我已经建立了与 MySQL 数据库的连接 并且已经将行插入到表中 该表包括firstName lastName and userID字段 现在我想通过构造函数的参数选择数据库中的特定行 import java

  • Swift 泛型函数无法将类型的值转换为预期的参数类型

    我尝试创建通用函数 func importArray

  • Pandas groupby 值与 bin

    这似乎是一个简单的问题 但我需要你的帮助 例如 我有 df x 1 2 3 4 5 6 7 8 9 10 y 2 1 3 1 8 9 6 7 4 6 如何将 x 在 1 到 5 和 6 到 10 的范围内分组 并计算这两个 bin 的平均值

  • JFreeChart：使用 java.time.LocalDate 或 java.time.LocalDateTime 创建图表

    java util Date非常容易出错 它死了 长命java time Given a Map

  • ASP.NET MVC4，视图将旧值返回到控制器

    我是 MVC 和 ASP NET 的新手 我的要求是 我必须第一次在我的视图中显示两条记录 并且我的视图包含一个 交换 按钮 当我按下此按钮时 应该执行控制器的后操作 并且它必须采用原始视图模型 并且需要交换两个记录并且应该呈现相同的视图

  • 在 url 中使用 # 打开模式

    我对这个可能是愚蠢的问题感到抱歉 但我想简单地在 url 中使用 打开模态 因此 如果我调用 www domain com modal1 它将打开已经弹出模式的页面 哦 我正在使用jquery 谢谢你 许多应用程序框架 我偏向backbon

  • 从一组观察结果创建队列式数据框[重复]

    这个问题在这里已经有答案了 我是 R 新手 有一个简单的问题 因为我仍在学习 R 数据操作 管理的风格 我有一段时间内基本临床特征 血压 胆固醇等 观察数据集 每个观察结果都有患者 ID 和日期 但作为单独的行项目输入 像这样的事情 Pat

  • VBA 查找和替换

    我正在使用 Excel VBA 从电子表格生成 Word 文档 作为最后一步的一部分 我想找到所有双段落并将其替换为单段落 基本代码 Dim objWord Dim objDoc Dim objSelection Set objWord C

  • 表视图中的单元格没有响应

    我正在开发一个待办事项列表应用程序 每当我在simulator并尝试打印我的项目array 其他单元格项目被打印 这是我的代码 import UIKit class TodoListViewController UITableViewCon

  • 递归时变量意外更改？

    Context 我目前正在尝试 Reddit 的 r 每日程序员挑战 这个想法是找到 ASCII 迷宫的解决方案 不幸的是 递归的工作方式与我的预期不同 程序检查是否有空间可以移动到当前空间的右侧 左侧 下方或上方 如果存在 则将空间移动到

  • Android 中平板电脑的布局

    我想在 Android 中为平板电脑和手机创建不同的布局 我应该将布局资源放在哪里才能实现这种差异化 我知道这是一个老问题 但为了它 根据文档 您应该像这样创建多个资产文件夹 res layout main activity xml For

  • 如何提高数据严重偏差的养猪工作的绩效？

    我正在运行一个 Pig 脚本 该脚本执行 GROUP BY 和嵌套 FOREACH 由于一两个减少任务 该脚本需要几个小时才能运行 例如 B GROUP A BY fld1 fld2 parallel 50 C FOREACH B U A

  • 像蜗牛一样在路径上进行 SVG 动画

    I have the following SVG and I would like to draw the circles pixel by pixel on the path after moveing It s like when th

热门标签