问题标签 [smil]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
445 浏览

smil - SMIL 是死了,还是可能只是渴望峡湾?

SMIL(同步多媒体集成语言)对于现代应用程序来说已经死了吗?

是否有用于组合已取代它的媒体的标准化格式?

0 投票
0 回答
103 浏览

svg - Illustrator SVG 不等坐标导出形状补间

我正在尝试在两个形状之间创建一个 SMIL 动画,我知道这两个形状需要具有相同数量的坐标。我遇到的问题是,当我从 Illustrator 导出两个 SVG 时,坐标在有多少组方面不匹配。两种形状都是从同一个源创建的,没有添加或删除额外的点,只是顶部的一条曲线被拉直。

这是我在 Codepen http://codepen.io/tands/pen/LEmoOK及以下的 SVG...

所以我想我的问题是如何在 codepen 上实现两个形状之间的形状补间,即使它们具有不同的坐标?

0 投票
1 回答
56 浏览

jquery - SBG SMIL 动画闪烁但动画不流畅

有人可以告诉我为什么我的动画不工作吗?我有两种形状要补间。我有相同数量的坐标。这两种形状都可以在下面的 codepen 链接中看到。

http://codepen.io/tands/pen/myKPPb

0 投票
0 回答
145 浏览

firefox - SMIL SVG 动画作为 Firefox 中的符号/def/sprite

在 Firefox 中,SMIL 动画似乎只适用于内联 SVG,而不是用作符号时。当用作符号和内联时,Chrome 似乎支持使用。

这是预期的行为还是错误?

在符号中使用它们真的很好,这样它们就可以在精灵/图标使用中使用。

JSFiddle 演示差异:http: //jsfiddle.net/tuL02p8f/1/

0 投票
1 回答
822 浏览

svg - SVG 问题:使用值和计算模式

我正在学习如何为 svg 制作动画。

我可以用 calcMode="spline" 在两个形状之间制作动画,我可以在没有 calcMode="spline" 的情况下在三个形状之间制作动画,但是我不能用 calcMode="spline" 在三个形状之间制作动画。

这是我的例子:

如果我删除调整 keyTimes="0;1" 的值,它会起作用。如果我删除 calcMode、keySplines 和 keyTimes,它就可以工作。但它不能一起工作。我在某个地方犯了错误,还是我们不能同时使用两者?

感谢您的帮助!

0 投票
1 回答
131 浏览

html - SMIL Animate SVG“到”值

我正在尝试为这个 SVG 矩形设置动画,使其以宽度 100 结束,但由于某种原因,它一直重置为原始值。帮助!

http://codepen.io/corysimmons/pen/RNmNQE

0 投票
1 回答
328 浏览

svg - SVG动画填充到无导致黑色背景

我希望这可以动画到透明背景。知道为什么它会变成黑色或如何修复它吗?

相关 CodePen:http ://codepen.io/corysimmons/pen/Byeoyw?editors=100

0 投票
0 回答
197 浏览

javascript - Can't read .animVal during SVG SMIL animation

This is for the SVG animation experts:

I'm trying to read the properties of a <g> element that I'm animating along a path using <animateMotion>. My understanding is that animateMotion applies a transform to the element, instead of simply changing one property at a time (x, y, rotation, etc).

According to my notes, you can access the current animated value of any SVG attribute in Javascript with the animVal sub-property of the relevant property. For example, element.cx.animVal.value or element.cx.animVal.valueAsString.

But for transforms, the corresponding property is element.transform, which is of type SVGAnimatedTransformList. The animVal of the transform returns an SVGTransformList. Reading through the spec at that link, I should be able to get these properties from my animated element:

element.transform.animVal.numberOfItems should return the number of items in the transform list. But instead, it returns 0.

element.transform.animVal.getItem(0) should return the first value in the transform list. Since it's apparently empty, I get an error when trying to access this property.

So, has anyone successfully used these properties and sub-properties to read values during animation, are they known to be problematic or unsupported, or am I doing something wrong?

Other things to note about my script:

  • tested in Firefox and Chrome
  • i'm logging out the properties every second with a `setInterval`
  • the animation itself works fine. how I got there shouldn't matter too much but I can answer your questions with more details
0 投票
1 回答
255 浏览

javascript - 让 javascript 知道何时在 epub3 电子书中播放媒体覆盖

我想让一些javascript代码修改作为媒体覆盖(smil驱动)的一部分播放的元素的一些属性。特别是,我对文本媒体覆盖感兴趣,它会在播放一些音频时突出显示。我的问题有两个:

  • 有没有办法找出媒体覆盖是否“活跃”?最好有一些回调功能,否则我可以创建一个计时器并继续检查 js 的状态。
  • 一旦我知道(如果可能)有一个元素被突出显示,有没有办法知道这个是哪个 SMIL ID?
0 投票
0 回答
471 浏览

css - SVG SMIL 动画在 Safari 中重复中断

我使用 SMIL 制作动画,使用 javascript 添加/删除一个类并触发切换。

在 Chrome 中一切正常,但在 Safari 中就崩溃了。动画在第一次切换时在 Safari 中工作,但随后中断,仅触发动画的某些部分。

此处链接到 Codepen:http: //codepen.io/matthewcpaul/pen/EaqmpE

任何帮助将不胜感激!