I am following this codepen to create a dialog animation. But the animation doesn't seem to go smooth like the reference when I set the bigger dialog width and height. It seems like the issue is with svg stroke-dashoffset values but I am not sure what values do I need to set. Here is the codepen that I reproduced.
<div id="modal-close-default" class="" uk-modal>
<div class="uk-modal-dialog custom-modal six uk-modal-body lab-border-7 uk-margin-auto-vertical">
..
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="600" height="376" rx="3" ry="3"></rect>
</svg>
</div>
</div>
#modal-close-default {
.uk-modal-dialog.custom-modal {
..
}
.modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
rect {
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 976; // total of dialog width and height (not sure what value to add)
stroke-dashoffset: 976;
}
}
&.uk-open>.uk-modal-dialog.custom-modal {
..
.modal-svg {
rect {
animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; // animation is not smooth
}
}
}
}
#keyframes sketchIn {
0% {
stroke-dashoffset: 976;
}
100% {
stroke-dashoffset: 0;
}
}
You miscalculated the length of the perimeter of the rectangle
If it's rough, then you need to consider this (width +height) * 2 = 1952px
The JS method getTotalLength() will help you calculate exactly the perimeter, taking into account the roundings.
Happened with rounding ~= 1946px
.modal-svg {
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
}
rect {
stroke: silver;
stroke-width: 6px;
stroke-dasharray: 1946; // total of dialog width and height (not sure what value to add)
stroke-dashoffset: 1946;
animation: sketchIn 5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; // animation is not smooth
}
#keyframes sketchIn {
0% {
stroke-dashoffset: 1946;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="modal-close-default" class="uk-modal">
<div class="uk-modal-dialog custom-modal six uk-modal-body lab-border-7 uk-margin-auto-vertical">
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 376" width="600" height="376" >
<rect id="rect" x="0" y="0" fill="none" width="600" height="376" rx="3" ry="3"></rect>
</svg>
</div>
</div>
<script>
let total = rect.getTotalLength();
console.log(total)
</script>
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'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>
I have animated a svg path but I need some help. I want to know if it's possible to animate the path at a certain speed and then an other speed. Here is a JSFIDDLE for more explanation.
I want the line to go fast and then the text to be less fast.
HTML
<svg class="svg-path" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2238.6 153.7" enable-background="new 0 0 2238.6 153.7" xml:space="preserve">
<path class="path" stroke-width="2" fill="none" stroke="#000000" d="M0,149.5c0.6,0,1629.7,0,1631,0c2.7,0,10.6,0,12.4,0c3.3,0,5.9,0,8.2,0c4.1,0,8.1,0,10.9,0
c3.8,0,5.3,0,8.7,0c3.9,0,3.6,0.1,8.1,0c6.3-0.2,8.2-0.9,12.7-2.6c4.5-1.7,8.3-4.1,11.4-7.1c3.1-3,5.5-6.6,7.1-10.7
c1.6-4.1,2.4-8.5,2.4-13.2c0-5.1-1-9.3-3.1-12.6c-2.1-3.3-4.8-6.1-8.2-8.3c-3.4-2.2-7.3-4.1-11.6-5.6c-4.3-1.5-8.8-3-13.3-4.4
c-4.6-1.4-9-3-13.3-4.8c-4.3-1.8-8.2-4-11.6-6.8c-3.4-2.8-6.1-6.2-8.2-10.3c-2.1-4.1-3.1-9.3-3.1-15.5c0-4.8,0.9-9.5,2.8-14
s4.5-8.5,8.1-11.9c3.5-3.4,7.9-6.2,13.1-8.3c5.2-2.1,11.1-3.1,17.8-3.1c7.5,0,19.1,0,25.5,0c7.5,0,22.4,0,35.9,0v140.5l44.4,0
L1788,9.6l66.3,110.3l64.5-109.8l-0.2,140.9h87.1c0,0,64.7,0,64.7-76.9c0-72-63.3-69.4-63.3-69.4s-60.7-2.7-60.7,69.2
c0,77,56.8,76.9,61,77c0.2,0,89.6,0,93.9,0V13.5l104.7,137.3l0-143.7l32.7,0 M1946.3,73.9 M2070.3,74.1"/>
</svg>
CSS
svg{
&.svg-path{
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
.path {
stroke-dasharray: 3800;
stroke-dashoffset: 0;
animation: dash 3.5s linear reverse;
}
}
#keyframes dash {
to {
stroke-dashoffset: 3800;
}
}
Is that possible to do this with one svg path ?
use this example http://jsfiddle.net/wxx5o9ms/1/
svg.svg-path {
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
svg.svg-path path {
stroke-dasharray: 3800;
animation: dash 3.5s linear reverse;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
70% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}