标签: svg-animate
SVG进度条
我有一个要求,我需要动态加载js文件,并显示通过SVG图标加载文件的进度.SVG图标将充当进度条,其中从底部到顶部线性填充颜色.
这是codepen
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<path fill="transparent" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>我打算让这个图标独立,这样我只会动态传递百分比值.
我以某种方式能够完成动画,但无法保持svg的边框或轮廓.这是代码.
#progressMove {
transition: .3s y;
}
#progressMove:hover {
y: 60%;
}<svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<defs>
<mask id="bubbleKenseo">
<path fill="red" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</mask>
</defs>
<g x="0" y="0" width="79.36px" height="93.844px" mask="url(#bubbleKenseo)" height="100">
<rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" />
</g>
</svg>所以,我遇到的问题是:
- 无法维护SVG的边框
- 无论我添加什么颜色都有某种不透明度,我无法删除.
- 编辑:浏览器兼容性:IE11 +,chrome,safari和firefox
PS:我不想使用SMIL动画.
推荐指数
解决办法
查看次数
如何为我的SVG路径设置动画
我有一个SVG我试图用animejs动画.
基本上它是一个选择路径图.
我设法制作动画,但结果是错误的.
我要这个:
var lineDrawing = anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutCubic',
duration: 4000,
begin: function(anim) {
document.querySelector('path').setAttribute("stroke", "#4a56f2");
document.querySelector('path').setAttribute("fill", "none");
},
complete: function(anim) {
},
autoplay: false
});
document.querySelector('.play-drawing').onclick = lineDrawing.restart;body {
margin: 20px;
font-family: 'Lato';
font-weight: 300;
font-size: 1.2em;
}
#anime-demo {
position: relative;
}
svg {
padding: 10px;
}
button {
background: orange;
color: white;
margin: 5px;
padding: 10px;
border-radius: 4px;
font-family: 'Lato';
cursor: pointer;
border: none;
outline: none;
}
button:hover {
background: …推荐指数
解决办法
查看次数
重启背景SVG动画
我有一个SVG设置为元素的背景图像.第一次显示元素时,动画正确播放.
在后续显示中(例如,如果通过JavaScript注入元素的副本,或者如果删除背景图像并使用CSS/JavaScript添加回来),则动画不会从头开始.我认为这是预期的功能,因为图像不被视为由浏览器重新加载 - 它使用已经动画的内存版本.
这是一个演示(不是我的):http: //www.luigifab.info/public/svg-smil/test.html
Firefox和Chrome有一些相关的浏览器错误报告,但如上所述,我认为这是预期的功能.
有没有办法让我的SVG动画在显示图像时重置/重放？
我理想的是只使用CSS和SVG寻找解决方案 - 如果不可能,那么使用JavaScript的解决方案.
推荐指数
解决办法
查看次数
你能为svg"背景图像"制作动画吗？
我想把一个svg-image中心和垂直中心响应我的窗口.所以我决定将图像整合到div背景中.现在,当我想将stroke-dasharray和动画与stroke-dashoffset添加到我的svg时它不起作用.
这个posibble是否可以为svg背景图像设置动画？
svg-image只包含许多行. 这里是我的svg文件(还有更多的行只有不同的x和y值):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1200" xml:space="preserve">
<g id="Layer_1">
<line class="path" stroke-linecap="round" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="960" y1="600" x2="2346.139" y2="-42.064"/>
</g>
</svg>在这里我的Html和Css文件:
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: red;
}
.Container {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-image: url(Space.svg);
background-size: cover;
background-position: center;
}
.path {
stroke-dasharray: 20;
} <body>
<div class="Container">
</div>
</body>推荐指数
解决办法
查看次数
SVG缩放动画从中心点而不是左上角
如何animateTransform在SVG中使用从中心点而不是左上角缩放对象？
例:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<circle style="fill:blue;" cx="50" cy="50" r="45">
<animateTransform attributeName="transform"
type="scale"
from="0 0"
to="1 1"
begin="0s"
dur="1s"
repeatCount="indefinite"
/>
</circle>
</svg>
(Codepen:http://codepen.io/anon/pen/wKwrPg？editors = 100 )
推荐指数
解决办法
查看次数
在D3.js中直播一条线
我刚刚开始使用D3.js,我想创建类似于我们在Paint中绘制线条的东西.步骤应该相同: - 单击屏幕上的某个点 - 拖动到目标以创建一条线.
我现在遇到麻烦的是当你将鼠标拖到目的地时,该线应该根据你的鼠标移动.我怎样才能做到这一点？
谢谢.
推荐指数
解决办法
查看次数
如何通过在Edge和IE中单击SVG形状来实现动画
同事们,我知道两种动画方式.这两个选项都适用于我可以访问的所有浏览器; 我没有只检查Safari.
第一个是使用该功能 elem.beginElement ();
var wrapper_svg_1 = document.getElementById("wrapper_svg_1"),
close = document.getElementById('close'),
open = document.getElementById("open");
let flag = true;
wrapper_svg_1.addEventListener('click', function() {
if (flag == true) {
close.beginElement();
flag = false;
} else {
open.beginElement();
flag = true;
}
});* {
margin: 0;
padding: 0;
}
html,
body {
width: 100vw;
height: 100vh;
background: #272727;
font-size: 20px;
}
#wrapper {
width: 100vw;
height: 100vh;
background: transparent;
}<div id="wrapper">
<svg id="wrapper_svg_1" viewBox="0 0 301 301" width="301" height="301">
<path fill="none" …推荐指数
解决办法
查看次数
SVG 动画淡入淡出
嗨，我有一个 SVG，它是堆叠的 5 个箭头形状。我想从下往上淡入每个箭头。当顶部箭头淡入时，我希望第一个淡出，然后第二个等等。然后通过淡入每个箭头再次开始动画。
这是SVG代码的代码笔：https : //codepen.io/anon/pen/gyJZEy
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect>
<animate id="hg0" begin="0;hg0.end" dur="8s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate id="hg3" …推荐指数
解决办法
查看次数
Svg填充给定路径的动画
我试图从左到右动画一个箭头.我的箭头路径的代码如下:
<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<g transform = "translate(0,0)">
<path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1">
<animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
</path>
</g>
</svg>以上是我箭头的svg路径内容.
请有人帮我如何从左到右填充路径.等待快速反应
推荐指数
解决办法
查看次数
如何在不使用UIWebView的情况下在iOS中显示动画svg文件
目前我UIWebView用来在我的原生iOS应用程序中显示动画svg文件.
这种方法很好,只要app处于前台,CPU使用率一直在较高的一侧.
有没有更好的方法来显示svg文件而不使用 UIwebView
我已经尝试了很多第三方库,但都只适用于静态svg文件而不是动画svgs
我试过以下
https://github.com/mchoe/SwiftSVG
https://github.com/exyte/Macaw
https://github.com/onmyway133/Snowflake
https://github.com/SVGKit/SVGKit
我的应用程序支持iOS 9及更高版本,我的代码在Swift3中
这是我想要显示的svg文件的on的链接
推荐指数
解决办法
查看次数
标签 统计
svg-animate ×10
svg ×9
css ×5
html ×3
javascript ×3
animation ×2
css3 ×2
anime.js ×1
css-shapes ×1
d3.js ×1
ios ×1
iphone ×1
jquery-svg ×1
swift ×1