问题标签 [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.
smil - SMIL 是死了,还是可能只是渴望峡湾?
SMIL(同步多媒体集成语言)对于现代应用程序来说已经死了吗?
是否有用于组合已取代它的媒体的标准化格式?
svg - Illustrator SVG 不等坐标导出形状补间
我正在尝试在两个形状之间创建一个 SMIL 动画,我知道这两个形状需要具有相同数量的坐标。我遇到的问题是,当我从 Illustrator 导出两个 SVG 时,坐标在有多少组方面不匹配。两种形状都是从同一个源创建的,没有添加或删除额外的点,只是顶部的一条曲线被拉直。
这是我在 Codepen http://codepen.io/tands/pen/LEmoOK及以下的 SVG...
所以我想我的问题是如何在 codepen 上实现两个形状之间的形状补间,即使它们具有不同的坐标?
jquery - SBG SMIL 动画闪烁但动画不流畅
有人可以告诉我为什么我的动画不工作吗?我有两种形状要补间。我有相同数量的坐标。这两种形状都可以在下面的 codepen 链接中看到。
firefox - SMIL SVG 动画作为 Firefox 中的符号/def/sprite
在 Firefox 中,SMIL 动画似乎只适用于内联 SVG,而不是用作符号时。当用作符号和内联时,Chrome 似乎支持使用。
这是预期的行为还是错误?
在符号中使用它们真的很好,这样它们就可以在精灵/图标使用中使用。
JSFiddle 演示差异:http: //jsfiddle.net/tuL02p8f/1/
svg - SVG 问题:使用值和计算模式
我正在学习如何为 svg 制作动画。
我可以用 calcMode="spline" 在两个形状之间制作动画,我可以在没有 calcMode="spline" 的情况下在三个形状之间制作动画,但是我不能用 calcMode="spline" 在三个形状之间制作动画。
这是我的例子:
如果我删除调整 keyTimes="0;1" 的值,它会起作用。如果我删除 calcMode、keySplines 和 keyTimes,它就可以工作。但它不能一起工作。我在某个地方犯了错误,还是我们不能同时使用两者?
感谢您的帮助!
html - SMIL Animate SVG“到”值
我正在尝试为这个 SVG 矩形设置动画,使其以宽度 100 结束,但由于某种原因,它一直重置为原始值。帮助!
svg - SVG动画填充到无导致黑色背景
我希望这可以动画到透明背景。知道为什么它会变成黑色或如何修复它吗?
相关 CodePen:http ://codepen.io/corysimmons/pen/Byeoyw?editors=100
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
javascript - 让 javascript 知道何时在 epub3 电子书中播放媒体覆盖
我想让一些javascript代码修改作为媒体覆盖(smil驱动)的一部分播放的元素的一些属性。特别是,我对文本媒体覆盖感兴趣,它会在播放一些音频时突出显示。我的问题有两个:
- 有没有办法找出媒体覆盖是否“活跃”?最好有一些回调功能,否则我可以创建一个计时器并继续检查 js 的状态。
- 一旦我知道(如果可能)有一个元素被突出显示,有没有办法知道这个是哪个 SMIL ID?
css - SVG SMIL 动画在 Safari 中重复中断
我使用 SMIL 制作动画,使用 javascript 添加/删除一个类并触发切换。
在 Chrome 中一切正常,但在 Safari 中就崩溃了。动画在第一次切换时在 Safari 中工作,但随后中断,仅触发动画的某些部分。
此处链接到 Codepen:http: //codepen.io/matthewcpaul/pen/EaqmpE
任何帮助将不胜感激!