I'm currently learning how to animate svg objects with CSS.
I know now how to animate a path with:
#keyframes stroke_fill {
0% {
fill: white;
}
50% {
fill: white;
stroke-dashoffset: 0;
}
100% {
fill: black;
stroke-dashoffset: 0;
}
}
.animation{
animation: stroke_fill 4s ease forwards;
stroke-dasharray: 324.774;
stroke-dashoffset: 324.774;
}
Paths that are grouped together are shown in a <g> tag.
Is it possible to animate the <g> tag?
If all children have the same animation and the same time it would be nice.
Now I have to give every single path a class which takes a lot of time if I run a complex svg file.
Doing it by group would save a lot of time.
Here is a Fiddle: https://jsfiddle.net/vvvwcrdy/
Yes it is possible. Did you try it?
Demo:
#keyframes stroke_fill {
0% {
fill: white;
}
50% {
fill: white;
stroke-dashoffset: 0;
}
100% {
fill: black;
stroke-dashoffset: 0;
}
}
.animation{
animation: stroke_fill 4s ease forwards;
stroke-dasharray: 324.774;
stroke-dashoffset: 324.774;
stroke: red;
stroke-width: 10;
}
<svg>
<g class="animation">
<rect x="20" y="20" width="120" height="120" />
<rect x="160" y="20" width="120" height="120" />
</g>
</svg>
Related
I am new to learning SVG and css animations. I am simply trying to draw the letter "T". My issue is that the path begins animating in two different spots. I want it to draw the horizontal line first before drawing the vertical line. What am I not understanding? Below is what i have thus far. Thanks.
.letter_loader {
fill: none;
stroke: #000;
stroke-width: 8px;
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: move 5s linear forwards;
}
#keyframes move {
100% {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22">
<path class="letter_loader"
d="M175.2 250.76 L275.2 250.76 M225.2 250.76 L225.2 350.76" />
</svg>
The way I would approach this wouldn't be the best way...
First, setup a box/line that blends in with the background. It should be compiled before the <path>. It should be as wide as the line and be as tall as the horizontal line's width. Then, start the vertical line at the top of the box/line that is supposed to blend in with the background. What is supposed to happen is although the animations start a the same time, the vertical line won't be seen by the viewer until the horizontal line finishes. This may be a bit more difficult if your background is a linear gradient.
Here is what I am thinking:
.letter_loader {
fill: none;
stroke: #000;
stroke-width: 8px;
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: move 5s linear forwards;
}
#keyframes move {
100% {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" style='background-color: #f1f1f1;'>
<path class="letter_loader"
d="M150 150 L250 150 M200 50 L200 250" />
<path style="stroke: #f1f1f1; stroke-width: 8px;" d="M200 50 L 200 146"/>
</svg>
You are drawing a single svg path with a single class, so, the entire path will be drawn with the same animation that starts with stroke-dashoffset:200px and after 5 seconds become 0px.
One option that I think (I'm not an expert with svg or animations, if someone is and I'm saying bullshit, please tell me) you can use, is to separate the path in two, one for top of T other for the base. So in the T base you add another class with another animation, that starts a little later than the top part.
See below code to understand it better.
/* class and animation for T Top*/
.letter_loader {
fill: none;
stroke: #000;
stroke-width: 8px;
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: move 5s ease forwards;
}
#keyframes move {
100% {
stroke-dashoffset: 0;
}
}
/* class and animation for T Base*/
.letter_loader_later {
fill: none;
stroke: #000;
stroke-width: 8px;
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: move_later 5s ease forwards;
}
#keyframes move_later {
/* until 25% it stills with 200px to have a "later start*/
25% {
stroke-dashoffset: 200px;
}
100% {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22">
<path class="letter_loader" d="M175.2 250.76 L275.2 250.76" /> <!-- T TOP -->
<path class="letter_loader_later" d="M225.2 250.76 L225.2 350.76"/> <!-- T BASE -->
</svg>
I've been trying to create a donut chart not too dissimilar to this example here: https://jsfiddle.net/4azpfk3r/
HTML:
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>
CSS
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
#-webkit-keyframes html {
to {
stroke-dashoffset: 80;
}
}
#keyframes html {
to {
stroke-dashoffset: 80;
}
}
#-webkit-keyframes css {
to {
stroke-dashoffset: 160;
}
}
#keyframes css {
to {
stroke-dashoffset: 160;
}
}
However, in both the above example, and my altered version I have trouble running them in IE 11 and Edge. I'm fairly certain it is due to the animation on the stroke-dashoffset but I'm not sure if there is any work around.
Note: I have already tried adding the line below as some similar questions have suggested but this provides no change in the behaviour
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE11 does not support CSS animations of SVG elements. So you would need to use a different approach if you want to support non-Edge IE.
However Edge has supported CSS animations of SVG elements since build 10240.
The reason your animations aren't working on Edge is because Edge insists that you include units with CSS values. Other browsers are more forgiving with SVG values.
So to fix, add px to all your dasharray and dashoffset values.
.circle_animation {
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
#keyframes html {
to {
stroke-dashoffset: 80px;
}
}
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
#-webkit-keyframes html {
to {
stroke-dashoffset: 80px;
}
}
#keyframes html {
to {
stroke-dashoffset: 80px;
}
}
#-webkit-keyframes css {
to {
stroke-dashoffset: 160px;
}
}
#keyframes css {
to {
stroke-dashoffset: 160px;
}
}
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>
<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>
i am new to SVG and animation.
just created a path and wanted to draw it with animation, i am using "stroke-dashoffset" but its not working.
Here is my HTML :
<div class="Q">
<svg height="100%" width="100%" viewBox="200 0 400 400">
<path id="latter_q" d="M1003.3425022861358,2828.211816939241a655.718421,655.718421,0,1,1,-397.5557043956452,543.2070169791295" style="fill: none; stroke-width: 300px; stroke-linecap: round;" transform="matrix(-0.220662 -0.00474159 0.00474159 -0.220662 452.115 953.136)" stroke="purple"/>
<circle id="e4_circle" cx="322" cy="293" stroke="purple" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="38.1936" fill="purple" />
<polygon stroke="purple" id="e5_polygon" style="stroke-width: 1px;" points="625.5 543.206 885.5 7.20558 1149.5 535.206 1021.5 481.206 889.5 225.206 767.5 481.206" fill="purple" transform="matrix(0.618136 0 0 0.618136 -4.20822 17.3249)"/>
</svg>
</div>
and CSS
#latter_q{
animation: DrwaQ 2s linear alternate infinite;
animation-delay: 1s;
/*stroke-dashArray: 1100;*/
stroke-dashoffset: 1100;
}
.Q{
width: 100%;
height: 100%;
position: absolute;
/*opacity: 0;*/
}
#keyframes DrawQ {
to { stroke-dashOffset: 0; }
}
finally got it worked.
CSS :
#latter_q{
animation: DrwaQ 2s ease-in ;
animation-delay: 0s;
stroke-dasharray: 3435;
}
#keyframes DrwaQ {
to {
stroke-dashoffset: 6904;
}
from {
stroke-dashoffset: 3447;
}
}
stroke-dashoffset is not a CSS property (yet) - you have to do this with JavaScript
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
I've been trying to find a modern google loader which is cross browser.
Can anyone please help me find one, i found this one which works for all except Internet Explorer, or maybe tell me how i can get this one to work in IE ?
I tried fakesmile but it didnt work.
HTML :
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
</svg>
</div>
CSS :
.loader {
position: relative;
margin: 0px auto;
width: 100px;
height: 100px;
zoom: 1;
}
.circular {
animation: rotate 1s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke: gray;
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite;
stroke-linecap: round;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124;
}
}
Older versions of IE do not support the keyframes, i left IE behind.
I'm doing some button animation with SVG and can't make it to work exactly I want. I tried find same case but no luck. So I end up here, because I spend too much time on this already. Any help would be much appreciated.
Here is the code: http://jsfiddle.net/wq4djg9z/2/
It works fine, but with one flaw. It's always starts animation from fixed value.
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
}
#button-border:hover {
-webkit-animation: dash 1.0s linear forwards;
pointer-events: all;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
Is there a way to start animation from current animation frame when mouse out the button to smooth animation?
What about using transitions instead of animations to do the reverse part ?
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
transition: stroke-dashoffset 1s linear;
-webkit-transition: stroke-dashoffset 1s linear;
}
#button-border:hover {
stroke-dashoffset: 0;
pointer-events: all;
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
#keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.00000" height="50.00000" id="svg1" version="1.1" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
<style type="text/css">
<![CDATA[]]>
</style>
<g id="button-border">
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 100,50.0 0,-50.00000 -100,00.00000" id="path2983" />
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 0,0 0,50 100,0" id="path2984" />
<text x="30" y="30" font-family="Verdana" font-size="15" fill="blue">Hello</text>
</g>
</svg>