svg动画可以暂停而不丢失累积的信息吗?

2023-11-23

您可以不受限制地停止和重复动画,但如果重新启动无限期动画,它将丢失其累积值并从初始值开始。

也许我应该用一个例子来澄清;以这个动画为例:

  <animate id="main"
    attributeName="transform" attributeType="XML"
    begin="startbox.click" dur="1s" end="endbox.click"
    from="rotate(0)" to="rotate(360)"
    additive="sum"
    accumulate="sum"
    fill="freeze"
    repeatCount="indefinite"
  />

如果我停止这个动画,然后开始另一个动画(比如说id="second")影响同一物体的旋转,second将从该点完美地继续main离开了。但是如果我通过点击开始这个startbox(或实际上任何其他事件)它将减去由main并在开始前重置旋转。

我想要的是一个适当的“暂停”,我可以在动画之前停止的地方继续。当然,我可以添加固定数量的相同动画和相同数量的相同开始/停止按钮来模拟效果,但这不是一个好的解决方案。特别是因为暂停次数是有限的。


整个示例(似乎仅适用于 Opera)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Click example</desc>
  <g>
    <rect id="startbox"
      x="10" y="10"
      width="20" height="20"
      stroke="none" fill="green"
    />
    <rect id="endbox"
      x="10" y="40"
      width="20" height="20"
      stroke="none" fill="red"
    />
    <g transform="translate(200,200)">
    <rect
      x="0" y="0"
      width="50" height="5"
      stroke="#10e9f3" fill="#30ffd0"
    >
      <animate
        attributeName="transform" attributeType="XML"
        begin="startbox.click" dur="1s" end="endbox.click"
        from="rotate(0)" to="rotate(360)"
        additive="sum"
        accumulate="sum"
        fill="freeze"
        repeatCount="indefinite"
      />
    </rect>
    </g>
  </g>
</svg>

它内置于 SVG 中

 SVGRoot.pauseAnimations();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

svg动画可以暂停而不丢失累积的信息吗? 的相关文章

  • 按位置获取元素?

    我正在研究 SVG 脚本 有 getElementById 或 getElementsByTagName 但我找不到任何方法来按位置获取元素 比如获取位置为x 10 y 10的元素 有什么办法可以实现这个目标吗 var yourElemen
  • 每 x 秒对 SVG 元素进行动画处理

    介绍 我了解一些基本的动画技术SVG两者同时使用Javascript和 DOM
  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var
  • 如何获取 svgElement 的比例?

    我正在研究 svg div style width 300 height 300 div
  • 如何逐步绘制矢量路径? (拉斐尔.js)

    如何逐步动画化矢量路径 就像它被绘制一样 换句话说 慢慢地逐像素地显示路径 我在用着Rapha l js but如果您的答案不是特定于库的 例如可能有一些通用的编程模式可以完成此类事情 我对矢量动画相当陌生 欢迎 使用直线路径很容易做到 就
  • Qt 支持在 QIcon 中为 SVG 着色

    看来 Qt 不支持 SVG 中路径标签上的描边 填充选项
  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f
  • 仅当现有填充颜色为特定值时才填充 SVG

    我正在使用此代码来更改 SVG 对象的填充颜色 它可以工作 function g mouseenter function path rect circle this attr fill 00C8C8 但是 我只想在现有填充颜色具有特定值时更
  • 使用 d3 进行多级/分组轴标签

    我想知道是否有一种简单的方法可以在 d3 中添加多级 分层 分组轴标签 例如 如果我有一个折线图 其中 x 轴的月份名称跨越多年 那么我还希望将年份作为月份名称下方的标签 因此它看起来像这样 Oct Nov Dec Jan Feb Mar
  • 使用 jQuery 修改 svg 文件

    我有一个 svg 文件 其中包含一些形状和一些文本 我想在运行时修改 svg 以便某些形状可以更改颜色 某些文本可以更改其内容 假设我的外部 svg 文件中只有两个元素 圆圈 1 具有该 id 的蓝色实心圆圈 text1 包含该 id 的
  • 为什么媒体查询中的 CSS 旋转不会旋转回来

    我有一个 SVG 其中一些元素根据媒体查询进行旋转 如下所示 media max width 480px rect transform rotate 10deg 该元素旋转得很好 但 至少在 Chrome 中 它拒绝返回 这是为什么 其他指
  • 在 HTML5 中使用 JS 创建内联 SVG

    我正在使用本地 HTML5 文件 它有在顶部 我在里面放了这样的东西
  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直
  • 海量矢量资源导入Android Studio

    有没有办法将许多矢量 svg 图像导入到项目中 导入 30 多个图标有点无聊而且相当愚蠢 Android Studio 使用哪个脚本来转换 svgs 现在 Android Studio 中可以实现这一点 在左侧的资源管理器中 效果很好
  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
  • 有没有办法将 SWF 转换为 SVG 格式?

    有没有办法将 FLA 或 SWF 转换为 SVG 格式 它可以是一个软件吗 或者甚至是网络转换器 我尝试了一些方法 但没有一个有效 所有这些似乎都已经过时了 不 SWF 支持的功能太多 而 SVG 格式无法创建有效的 SWF 版本 如果您只
  • SVG线宽问题

    我开始了我的svg学习 我想用svg线做一些技巧吧 但有件事我不明白 我为每个技能创建 2 行 一行是空的 另一行是知识百分比 问题是 前两行的高度是我给出的笔画宽度的一半 其他线都有很好的高度 这是一个 jsbin http jsbin
  • 为什么我的 D3 SVG 图上的轴不会更新?

    I have 简单的 D3 散点图 http www raxacoricofallapatorius com test scattertest html我在显示数据的几个不同属性之间切换 但是虽然我可以更改数据点 并按照我想要的方式进行转换

随机推荐

  • onClickListener 在片段中不起作用

    我在片段中的 onClicklistener 上遇到了一些问题 如果我点击按钮什么也不会发生 我既没有从 Logcat 中的 onClicklistener 收到消息 屏幕上也没有出现 Toast 但我在代码中找不到错误 有任何想法吗 我将
  • Access 数据库的连接池

    我有一个应用程序经常从 Access 数据库读取数据 有什么方法可以使用连接池吗 我的开放数据库方法 private bool OpenDatabaseConnection string databaseName try string co
  • WiX 权限,如何用 DACL 标志表达“修改”

    我正在尝试将自定义权限应用于文件夹作为 WiX 3 0 4318 0 安装程序的一部分 就资源管理器中的安全属性 UI 而言 我想添加修改 BUILTIN Users 的权限 显然 它需要能够抵抗用户名的本地化 因此 根据我迄今为止的研究
  • jQuery 在鼠标移开时隐藏 div

    我看了很多关于这个项目的帖子 但找不到正确的解决方案 抱歉 如果它已经在某处得到回答 我想要的是 我有一个DIV与我的菜单项 当click事件被触发href元素 现在我想隐藏菜单 当鼠标离开时DIV元素并且不在上面href元素 到目前为止
  • vue-socket.io 如何连接到多个 websocket 服务器

    我尝试从 VUE 客户端连接到两个不同的 Web 套接字服务器vue socket io像这样 import store from store store import store2 from store store2 Vue use Vu
  • watchAppExtension 中的 NSUserDefault 更改通知处理

    我正在创建一个 手表应用程序 只是为了当用户点击 iPhone 主机应用程序中的表格视图时在手表上显示值 我想收到共享值更改的通知UserDefault 它在 WatchKit 应用程序和 iOS 主机 应用程序之间共享 因此当用户在主机应
  • 在Python中查找最接近的值并返回数组的索引

    我找到了这个帖子 Python 查找数组中的元素 它是通过匹配值返回数组的索引 另一方面 我想做的事情相似但又不同 我想找到与目标值最接近的值 例如 我正在寻找 4 2 但我知道数组中没有 4 2 但我想返回值 4 1 而不是 4 4 的索
  • 生成错误:您必须添加对 System.Runtime 的引用

    我正在准备一个全新的 ASP NET MVC 5 1 解决方案 我添加了一堆 NuGet 包并使用 Zurb Foundation 等进行设置 作为其中的一部分 我添加了对内部 NuGet 包的引用 该包是一个可移植类库 我认为这会在构建服
  • 将管道的一部分作为单独的作业运行

    我们正在考虑将 Jenkins Pipeline 插件用于一个相当复杂的项目 该项目由多个交付组成 在合并之前需要使用不同的工具 在不同的机器上 构建这些交付 尽管如此 使用单个程序完成完整的构建似乎很容易Jenkinsfile 而且我喜欢
  • 如何在android中制作带圆角的自定义对话框

    我正在尝试做的事情 我正在尝试在 android 中制作一个带圆角的自定义对话框 怎么了 我可以制作自定义对话框 但它没有圆角 我尝试添加选择器 但仍然无法实现圆角 下面是我的代码 Java代码 private void launchDis
  • 将 YoloV3 输出转换为边界框、标签和置信度的坐标

    我运行 YoloV3 模型并获得检测 3 个条目的字典 探测器 yolo v3 Conv 22 BiasAdd YoloRegion numpy ndarray 与 形状 1 255 52 52 探测器 yolo v3 Conv 6 Bia
  • 使用替代性能指标评估 R 插入符模型

    我正在使用 R 的插入符包进行一些网格搜索和模型评估 我有一个自定义评估指标 它是绝对误差的加权平均值 权重是在观察级别分配的 X lt c 1 1 2 0 1 feature 1 w lt c 1 2 2 1 1 weights Y lt
  • 如何通过adb接听电话

    我可以通过任何 adb 命令接听电话吗 我知道你可以通过 adb shell service call phone 2 s16 15084157509 来拨打号码 电话服务可以接听电话吗 或者我可以发送一些 adb 命令来操纵活动吗 非常感
  • 使用 Internet Explorer 兼容模式的缺点

    强制在 IE 中以兼容模式查看网站有什么缺点 假设我们强制 IE9IE8兼容模式 性能缺点 无法使用任何新的 IE9 特定功能 例如 HTML5 CSS3 SVG Why 我们运行自 2000 年以来开发的旧版 Web 应用程序 因此与 C
  • 是否可以在 F# 中组合多个属性?

    我试图找出此 C 属性声明的 F 等效项 ComImport InterfaceType ComInterfaceType InterfaceIsIUnknown Guid 000214EE 0000 0000 C000 000000000
  • Android 上的 AutoCompleteTextView 点击事件

    我已经成功实现了我的 AutoCompleteTextView 它基于SQLite查询并放置在数组适配器中 这一切都工作得很好 但是我无法让我的 onclickevent 工作 我只想创建一个意图将所选值传递给新活动 我知道如何创建 onc
  • 在 Javascript 中为所有 http 请求添加自定义标头

    我想向 ASP Net Web 表单应用程序中的每个 http 调用添加自定义标头 承载令牌 使用以下链接中的建议 我添加了将添加的标头发送到服务器的代码 但无济于事 如何拦截所有http请求 包括表单提交 and 如何更改请求的标头
  • Hadoop MapReduce - 每个输入一个输出文件

    我是 Hadoop 的新手 我正在尝试弄清楚它是如何工作的 至于练习 我应该实现类似于 WordCount Example 的东西 任务是读入多个文件 进行字数统计并为每个输入文件写入一个输出文件 Hadoop 使用组合器并将映射部分的输出
  • 为每组选择前 2 个值

    我无法获取每个组的前 2 个值 组位于列中 例子 ID Group Value 1 A 30 2 A 150 3 A 40 4 A 70 5 B 0 6 B 100 7 B 90 我希望我的输出是 ID Group Value 1 A 15
  • svg动画可以暂停而不丢失累积的信息吗?

    您可以不受限制地停止和重复动画 但如果重新启动无限期动画 它将丢失其累积值并从初始值开始 也许我应该用一个例子来澄清 以这个动画为例