- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在尝试确定如何有效地反转此 SVG 动画(使用 SMIL),它使用 animateMotion
和 path
上的 d
属性元素。我需要动画围绕形状逆时针运行。
当前动画可以查here相关代码如下。
document.getElementById("svgobject").pauseAnimations();
<svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.5px" height="451.5px" viewBox="0 0 461.5 461.5" enable-background="new 0 0 461.5 461.5" xml:space="preserve">
<g>
<path fill="none" stroke="black"
d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/>
<rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)">
<animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"
begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" />
</rect>
</g>
<!--start and stop animation-->
<g onclick="document.getElementById('svgobject').unpauseAnimations()"
transform="translate(160 100)">
<rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
<text style="font: 16px Arial Black; fill: white; stroke: black;"
transform="translate(2 20)">START</text>
</g>
<g onclick="document.getElementById('svgobject').pauseAnimations()"
transform="translate(260 100)">
<rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
<text style="font: 16px Arial Black; fill: white; stroke: black;"
transform="translate(5 20)">STOP</text>
</g>
</svg>
我明白我可以手动反转 SVG 路径数据命令,包括 moveto (M,m)、lineto (L,l)、curveto (C,c) 等。
考虑到我需要反转的路径坐标数量(除了这个动画中的那些),我正在尝试确定是否有更有效的方法来执行此操作。
最佳答案
您可以使用 keyPoints
和 keyTimes
属性反转动画的方向。
<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
fill="freeze" keyPoints="1;0" keyTimes="0;1">
这里我们告诉运动从 1(路径的终点)到 0(路径的起点)。
这在 Firefox 中有效,但遗憾的是在 Chrome 中无效。 Chrome 似乎有问题。
更新:
我发现了与此相关的 Chrome 错误:https://code.google.com/p/chromium/issues/detail?id=353108
如果 calcMode 为“paced”(默认设置),则 keyTimes 似乎已损坏。如果您将其更改为其他内容,例如“线性:动画在 Chrome 中也能正常工作。
<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear">
关于javascript - 如何在运动路径上有效地反转 SVG (SMIL) 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28057539/
我收到未知数据,我想以编程方式查看相关性,并将所有完全相关的变量组合在一起(忽略方向)。在下面的数据集中,我可以手动查看相关性并说 a, f, g, h一起去吧b, d, e .我怎样才能以编程方
这个问题在这里已经有了答案: use dplyr's summarise_each to return one row per function? (3 个答案) 关闭 4 年前。 作为探索性工作的
我想要完成的是使用数组存储未知大小的多项式。我在互联网上看到的是使用一个数组,每个单元格都包含系数,度数是单元格编号,但这不是有效的,因为如果我们有一个多项式,如:6x^14+x+5。这意味着我们将从
嘿伙计们,我一直在尝试解析 HTML 文件以从中抓取文本,但时不时地,我会得到一些非常奇怪的字符,例如 à€œ。我确定是“智能引号”或弯头标点符号导致了我的所有问题,因此我的临时修复是搜索所有这些字符
我原来的 data.table 由三列组成。 site、observation_number 和 id。 例如以下是 id = z 的所有观察结果 |site|observation_number|i
"Premature optimisation is the root of all evil (but it's nice to have once you have an ugly solutio
给定这个数组 X: [1 2 3 2 3 1 4 5 7 1] 和行长度数组R: [3 2 5] 表示转换后每行的长度。 我正在寻找一个计算效率高的函数来将 X reshape 为数组 Y: [[ 1
我有一些 data.frame s: # Sample data a <- data.frame(c(1:10), c(11:20)) names(a) <- c("A", "B") b <- dat
我有点困惑。列表擅长任意位置插入,但不善于随机访问? (怎么可能)如果你不能随机访问,你怎么知道在哪里插入? 同样,如果你可以在任何位置插入,为什么你不能从那个位置高效地读取? 最佳答案 如果您已经有
我有一个向量,我想计算它的移动平均值(使用宽度为 5 的窗口)。 例如,如果有问题的向量是[1,2,3,4,5,6,7,8],那么 结果向量的第一个条目应该是 [1,2,3,4,5] 中所有条目的总和
有一个随机整数生成器,它生成随机整数并在后台运行。需求设计一个API,调用时返回当时的簇数。 簇:簇是连续整数的字典顺序。例如,在这种情况下,10,7,1,2,8,5,9 簇是 3 (1,2--5--
我想做的是将一组 (n) 项分成大小相等的组(大小为 m 的组,并且为简单起见,假设没有剩余,即 n 可以被 m 整除)。这样做多次,我想确保同一组中的任何项目都不会出现两次。 为了使这稍微更具体一些
假设我有一些包含类型排列的模板表达式,在本例中它们来自 Abstract Syntax Tree : template
我已经在这方面工作了几天,似乎没有我需要的答案。 由于担心这个被标记为重复,我将解释为什么其他问题对我不起作用。 使用 DIFFLIB for Python 的任何答案都无助于我的需求。 (我在下面描
我正在使用 NumPy 数组。 我有一个 2N 长度向量 D,并希望将其一部分 reshape 为 N x N 数组 C. 现在这段代码可以满足我的要求,但对于较大的 N 来说是一个瓶颈: ``` i
我有一个问题: 让我们考虑这样的 pandas 数据框: Width Height Bitmap 67 56 59 71 61 73 ...
我目前正在用 C 语言编写一个解析器,设计它时我需要的东西之一是一个可变字符串“类”(一组对表示实例的不透明结构进行操作的函数),我将其称为 my_string。 string 类的实例只不过是包装
假设我在 --pandas-- 数据框中有以下列: x 1 589 2 354 3 692 4 474 5 739 6 731 7 259 8 723
我有一个成员函数,它接受另一个对象的常量引用参数。我想 const_cast 这个参数以便在成员函数中轻松使用它。为此,以下哪个代码更好?: void AClass::AMember(const BC
我们目前正在将 Guava 用于其不可变集合,但我惊讶地发现他们的 map 没有方法可以轻松创建只需稍作修改的新 map 。最重要的是,他们的构建器不允许为键分配新值或删除键。 因此,如果我只想修改一
我是一名优秀的程序员,十分优秀!