问题标签 [smil]

我有布拉格机场的航空航班目的地的 SVG 地图。我想沿着通往这些机场的路径制作一个圆圈。

在这里获取代码（对不起，在 jsfiddle 上不起作用）。

处理“飞行”动画的代码如下所示：

第一个动画（flights对象的第一个键）按原样开始，其余的出现在 0,0（屏幕的左上角）并且根本不动。我不知道是什么原因造成的，因为该circle()函数<animateMotion>为每个独特的航班定义了新元素。

更新： jsfiddle

我正在使用 mbuni 通过 http url 将彩信作为 smil 内容发送

和

现在彩信被提交到手机，但图像没有被下载。

邮箱地址

微笑文件内容和路径

路径是 /var/www/html/mms/。我也将图像路径从 image1.jpg 更改为 mms/image1.jpg 但没有变化。

如果我发送像 content-url= http://localhost/image1.jpg这样的直接图像，它会正确发送。

我已经使用 osmf 插件创建了一个自定义播放器，但是当我播放 200kbps 比特率 RTMP 视频时，我在 OSMF 中遇到了问题。我将缓冲区大小设置为 2 秒，将 OSMFSettings.enableStageVideo 设置为 false。我发现视频像素化但我播放jwplayer 中的相同视频，然后我发现视频像素化程度较低，因此我附上了两张图片。任何人都可以告诉如何解决这个问题。

OSMF自定义播放器

JWPlayer

谢谢

您能否提供一些有关新版本 FF 的信息，该版本在 37.0.2 版之后通过。我知道版本 38 中的大多数错误已在版本 38.0.5 中修复。我注意到在所有新版本的 FF 中属性“animate”和“animateTransform”的处理速度有所不同，因此页面变得非常慢。如果删除动画标签：

对此：

然后我们失去了动画（悬停）效果，速度变得正常，就像在旧版本 FF(37.0.2) 中（没有删除）动画标签一样。

我创建了主题：https ://bugzilla.mozilla.org/show_bug.cgi?id=1171966

向其中添加了一些代码和视频示例。在页面上有大量元素的情况下会观察到缓慢的问题，但前提是每个元素都具有像“动画”这样的属性。也可能是这样的：

就我而言，我使用标签来制作悬停效果并更改鼠标悬停时的不透明度。不使用 css、html5、DOM

很高兴找到类似的主题（stackoverflow、bugzilla）或遇到这个问题的人。谢谢

我很难让我的 SVG 图标正确重复。我需要它们像 gif 一样重复，单独且无限期地重复。我只能让两个工作，但我需要三个都一个接一个地重复。这是 SVG 动画的 js fiddle。下面的代码

https://jsfiddle.net/allanberlin/cma0ejkw/

按照这个话题：

Firefox 38-40 SMIL 问题 - 速度非常慢（在 22.09.15 的 FF 版本 41 中解决）

和这个话题：

打算弃用：SMIL

SVG 标签“animateTransform”不能正常工作。用 CSS 或 CSS 过渡替换 SMIL（动画标签）会很好。

---

下一个谷歌浏览器警告：

修订版 196823：添加 SMIL 弃用警告

---

首先，我需要实现三件事：

1）鼠标悬停效果（最简单）

它怎么样：

我删除了set标签，将类rect添加到标签中，并将其添加到 CSS 悬停伪类中：

---

2）在对这个元素（页面加载）进行更改后，它会缩放几次

它怎么样：

如何在没有animate标签的情况下组织：

？？？

---

3）它动画放大和缩小（onclick）

它怎么样：

animate没有标签如何组织？尝试使用:active，但行为有所不同：

---

这是我的模板元素的完整代码：

---

我当前工作项目的工作版本如下所示：

http://jsfiddle.net/7e2jeet0（以前仅由浏览器 FF 使用 - 因为（注意）悬停在这里使用 2 个数字 - 导致 [Chrome 支持 SMIL 和 'use' 一起，Firefox 目前不支持 SMIL 和 'use ' 一起] / 根据罗伯特·朗森）

在我尝试制作等效的 CSS 时，它看起来像

http://jsfiddle.net/7e2jeet0/1/（在FF中）

http://jsfiddle.net/7e2jeet0/2/（在 Chrome 中）

---

或其他元素相同。工作版本：

http://jsfiddle.net/f7o03rsr/

http://jsfiddle.net/f7o03rsr/1/

http://jsfiddle.net/f7o03rsr/2/

谢谢！

---

编辑 1

我发现这种组合变体适用于 Firefox 中的悬停和鼠标按下，但只有悬停效果在 Chrome 中有效。

---

我也对如何保存其中一些动画感兴趣：

http://jsfiddle.net/e4dxx2wg/

http://jsfiddle.net/e4dxx2wg/1/

通过将它们转移到 CSS / Web 动画？

我可以设置动画转换 raplace 吗？

对于变换（缩放）的操作，就像我在这里用我的'stroke-opacity'属性做的那样：

我试着得到这样的东西

但这种结构不起作用。

有用：

悬停示例（使用集合）：http: //jsfiddle.net/exn2qr0s/

点击示例（使用 animateTransform）：http: //jsfiddle.net/exn2qr0s/1/

它不起作用：

点击示例（使用集合）：http: //jsfiddle.net/exn2qr0s/2/

我需要使用 set 标签而不是 animateTransform 来创建放大效果，当“mousedown”导致 animateTransform 现在在上次 Fire Fox 更新后工作不佳（已弃用的 SMIL SVG 动画替换为 CSS 或 Web 动画效果（悬停，单击））

我正在尝试使用 SMIL 为对象中心周围的缩放转换设置动画，它适用于 Firefox 38，但不适用于 Chrome 43，在 Chrome 中，由于某种原因，CSS transform-origin 属性似乎被忽略了

原来的

我需要这种方法在 Chrome 中工作，因为它是最干净/最简单的。

我尝试过其他像这样工作的东西：

试用#1

但它有点hacky，我不喜欢它。

我也尝试过附加动画，但它有问题（可能是我的错）

试验#2

有任何想法吗？谢谢。

我正在使用 SVG/SMIL 开发解释性线条动画，并在 Firefox 中观看动画时遇到高 CPU 负载。SVG 本身和声明性动画在 CPU 性能方面是否有任何最佳实践？由于不同的查看器和浏览器会产生不同的结果，因此我正在寻找一般的经验法则，我也希望能够将其转换为 Web Animations API。

我有一些形状，我使用两个按钮旋转，一个用于顺时针方向，另一个用于逆时针方向：

你也可以在这个 CodePen 上看到它：http: //codepen.io/Daolagajao/pen/qdyBLo

当我单击一次时，形状动画效果很好。当我快速连续单击按钮（双击、三次单击等）时，就会出现问题。旋转轴移动，这当然是不可取的。

有没有办法解决这个问题？就像当我单击下一个按钮时，正在进行的前一个动画停止保留位置并发生新的动画。