- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对使用 smil SVG 动画和使用 javascript/jquery otf 更改内容有一些疑问。
这是我已经尝试过的:
HTML/XML:
<svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">
<g id="story_1">
<path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
<animate id="story_1_1_1"
attributeName="d"
from="M200,100l0,0" to="M200,100l0,380" dur="1s"
begin="0s;story_1_1_2.end"
end=""
/>
<animate id="story_1_1_2"
attributeName="d"
from="M200,100l0,380" to="M200,100l0,0" dur="1s"
begin="story_1_1_1.end"
end=""
/>
</path>
<path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
<animate id="story_1_2_1"
attributeName="d"
from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
begin="story_1_1_1.begin+1s;story_1_2_2.end"
end=""
/>
<animate id="story_1_2_2"
attributeName="d"
from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
begin="story_1_2_1.end"
end=""
/>
</path>
<g/>
<g id="story_2">
<path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
<animate id="story_2_1_1"
attributeName="stroke-dashoffset"
from="795.8291015625" to="-795.8291015625" dur="2s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
<animate id="story_2_1_2"
attributeName="stroke-dashoffset"
from="795.8291015625" to="0" dur="1s"
begin=""
calcMode="spline"
keySplines=".28 .25 .265 .25"
keyTimes="0;1"
end=""
/>
</path>
<g/>
</svg>
JS/jQuery:
在本例中的按键事件上执行以下操作:
document.getElementById( 'story_1_1_1' ).attributes[ 5 ].value = '';
document.getElementById( 'story_1_1_1' ).attributes[ 6 ].value ='story_1_1_1.end';
document.getElementById( 'story_1_2_1' ).attributes[ 6 ].value ='story_1_2_1.end';
document.getElementById( 'story_2_1_1' ).attributes[ 5 ].value= 'story_1_1_2.end;story_2_1_1.end';
令人钦佩的结果:
我想实现:
实际结果:
到目前为止发生了什么:
我对如何做到这一点的不同方法和/或想法持开放态度。 SMIL 至少在一开始看起来是一种快速而简单的方法,而且在移动设备上的性能也很好。也许在这种情况下 css3 动画更好?
我该如何解决这个问题?
最佳答案
这很难……我在这里搞砸了:
$(window).keypress(function(e) {//spacebar trigger
if (e.keyCode === 0 || e.keyCode === 32) {
$('#story_1_1_1, #story_1_1_2, #story_1_2_1, #story_1_2_2').attr('end', 'story_2_1_1.begin');
$('#story_2_1_1').attr('begin', '0s;story_2_1_2.end');
}
});
关于javascript - 使用 SMIL 的 SVG 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28294933/
SMIL ( Synchronized Multimedia Integration Language ) 对于现代应用程序来说已经死了吗? 是否有替代它的用于组合媒体的标准化格式? 最佳答案 从缺乏
有人有学习 SMIL 动画的资源吗? 最佳答案 这些应该让你继续: W3Schools SVG Reference Hefty tutorial连同 66 page PDF tutorial Anim
我正在尝试向简单的 SVG SMIL 动画添加计时功能。显然可以使用 keySplines 设置时间/缓动属性,但是在我的示例中它不起作用:
SMIL is deprecated and not going to work on chrome anymore 我刚开始学习如何制作动画 svg,我偶然发现了这个声明。我不知道这是不是真的(我希
我使用 SVG SMIL 动画是因为我还没有找到另一种方法来制作曲线形状的动画。这种方法适用于除 iOS 浏览器之外的所有浏览器。 这是我的 SVG 代码: .st0{fill:rgba(
我试图在我的 SVG 中让两个动画相继运行。 这就是它们的写入方式。它们被写入一个组,里面有一些原语。我正在尝试让整个组旋转然后平移。 但是当我运行这个时,变换似乎在第一个动画结束时重置
上下文:我正在使用 SVG 制作信息图。我希望借助动画,尤其是通过链接动画,让文档变得栩栩如生。我已经熟悉 SVG,但最近才开始学习 SVG 动画。 由于 SMIL 已被弃用,我正在尝试用纯 SVG
我创建了一个包含超过 3000 条路径的怪物动画 SVG 文件。每个路径都使用声明性 SMIL 动画独立地进行动画处理。它在所有新浏览器中播放缓慢但精美,为 IE9 使用一点 js 回退。 (我会发布
我有一张布拉格机场航类目的地的 SVG map 。我想沿着通往这些机场中的每一个的路径制作一个圆圈。 获取代码here (对此感到抱歉,不适用于 jsfiddle)。 处理“飞行”动画的代码如下所示:
我正在尝试制作一个 SVG 图标,该图标在悬停时使用 SMIL 进行动画处理(好吧,我不在乎它是 SMIL 还是 CSS,我只是不想使用 JS)并且我已经走了很远但是我遇到了一个无法在网上找到答案甚至
过去我在 javascript 方面做过很多工作,包括一些 DOM 操作。从那里我了解到回流/重绘在某些情况下可能是一个很大的性能问题,并且通常应该限制在最低限度。例如,当添加一组 div 时,您应该
我需要我的 perl 脚本从 SMIL 文件中提取 jpeg。我看到在 linux 中执行此操作的唯一方法是使用以下命令。 xxd -c1 -p wapenc\?T\=mavodi-6-13b-1f-
SMIL(同步多媒体集成语言)最后一次更新是在 2008 年,有谁知道在同步多媒体文件时是否有更好的协议(protocol)可遵循? 最佳答案 SMIL 没有天然的竞争对手,因此任何其他解决方案都将依
我正在尝试确定如何有效地反转此 SVG 动画(使用 SMIL),它使用 animateMotion 和 path 上的 d 属性元素。我需要动画围绕形状逆时针运行。 当前动画可以查here相关代码如下
有谁知道流行浏览器中 SVG SMIL 动画支持的当前状态?看起来 Safari、Chrome 和 Opera 都支持它。 Firefox 在他们的开发页面中有关于添加了 SMIL 支持的令人困惑的报
我在 Safari 中遇到基本 SVG 动画的问题。 它通过仅显示没有动画的 SVG 优雅地失败了,但如果可能的话,我希望它也能在 Safari 中工作。 动画与找到的示例非常相似 here :
我正在尝试使用 SVG 为视频元素创建 UI。我正在寻找一个简单的解决方案来为控制栏设置动画,当鼠标在其中时(如 YouTube),我想从窗口底部升起。 这是我想做的:
我正在尝试使用 SMIL以动画方式将文本输入到嵌入在 SVG 中的字段中。我每晚在 Chrome 和支持 SMIL 的 Firefox 中尝试了以下代码,但没有效果:
我一直在看一篇关于 SVG 动画的文章。 Code: http://codepen.io/chriscoyier/pen/DpFfE 文章:http://css-tricks.com/svg-shap
我对使用 smil SVG 动画和使用 javascript/jquery otf 更改内容有一些疑问。 这是我已经尝试过的: HTML/XML:
我是一名优秀的程序员,十分优秀!