I am trying to animate some elements of an image in svg. To test the animation I first tried it on the whole image to check that it works well (it does). But when I change the class state-indicator-illustration by the id note-double-1 (id of the element to animate) the element note-double 1 disappears completely without me understanding why.I specify that to test I inserted the image "line by line" in the HTML code.
Here is the code (i put jsfiddle to avoid very long message) :
JsFiddle: https://jsfiddle.net/pju2ateL/2/
Thanks for your help,
elshiri.
As I've commented: you need to remove the transform attribute of the path.
In order to preserve your transformations I am wrapping the path in a group and transform the group instead of transforming the path. Also I had to change the viewBox since otherwise the path falls outside the svg canvas.
As you can see the css animation is working.
/* .state-indicator-illustration is working */
#note-double-1 {
/*overflow: hidden;*/
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="244" height="149.388" viewBox="-15 -320 244 149.388">
<g id="off" transform="translate(-1090, -390)">
<g transform="translate(-28.904 -320.214)" >
<path id="note-double-1" d="M1114.926,434.328l5.138-22.688,22.647,1.41c-.05.226-.093.412-.133.6q-2.918,12.882-5.824,25.761a5.089,5.089,0,0,1-3.018,3.727,7.907,7.907,0,0,1-9.016-2.153c-2.277-2.776-1.476-6.41,1.8-7.774a7.7,7.7,0,0,1,8.184,1.341c.1.083.205.172.31.245h.067l3.237-14.3c-1.28-.081-2.527-.164-3.772-.245-4.355-.272-8.713-.535-13.066-.821-.412-.029-.524.113-.61.49-1.4,6.229-2.861,12.445-4.2,18.686a5.393,5.393,0,0,1-4.558,4.48,7.783,7.783,0,0,1-8.129-3.455,4.664,4.664,0,0,1,1.414-6.408,7.077,7.077,0,0,1,6.186-.777,8.54,8.54,0,0,1,1.767.758A17.8,17.8,0,0,1,1114.926,434.328Z"/>
</g>
</g>
</svg>
Related
I have some strange pieces of svg for animate them, the problem is, them no are a 'img-box-style' so, when I put one in another, rotate, translate to another place, etc. know the transform-origin is important. I do it by hand using porcents and try-catch after I get them. But... there aren't one or two. So...
I need to 'see' the transform-origin point of a svg, I trying by using ::after, adding anothers divs or spans, them inherit and works but not for svg. Finally i try using a <circle> but also, don't inherit, i don't know what to do.
Sometimes I need to put the circle in the middle of the two objects, in another time I need to put where the first fig start maybe x: 10% y: 60%.
Lets said I put put transform : 10% 60%; and see what I doing.
body{margin:3rem;}
#svg-id{height: 75vh; background: rgb(216 86 228 / 25%);}
#svg-id g{
/* transform-box: fill-box; */
transform-origin: center; /* how i can 'see' the transform origin??? */
/* animation: rotate 3s infinite linear; */
}
#svg-id g circle{
fill: red;
transform-origin: inherit; /* how inherit the transform origin??? */
}
#keyframes rotate{
from{transform: rotate(0turn);}
to {transform: rotate(1turn);}
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" id="svg-id" viewBox="0 0 237.79 190.08">
<g>
<polygon points="12.21 129.77 40.5 150.42 136.21 115.91 44.66 90.08 12.21 129.77" />
<polygon points="143.89 114.5 152.67 76.72 216.41 26.34 188.17 112.21 143.89 114.5" />
<circle r=16 />
</g>
</svg>
</div>
I have a website where I fade in a set of SVG icons which have the filter: drop-shadow rule applied. This works fine on desktop, however on iOS the shadow gets cut off once the animation finishes.
For example, this is the html:
<div class="fade-in">
<svg class="shadow" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="white"/>
</svg>
</div>
The css:
#keyframes fade-in {
from {
opacity: 0.0;
}
to {
opacity: 1.0;
}
}
.fade-in {
animation: fade-in 2s;
}
.shadow {
filter: drop-shadow(0 0.1rem 0.7rem black);
}
JS Bin:
https://jsbin.com/yonifusomo/edit?html,css,output
Result on iOS after the animation finishes:
Safari has multiple bugs related to shadows and various animations. Luckily, looks like this one is not the worst. Adding a -webkit-transform: translateZ(0); property to your .fade-in class did the trick for me.
For more info: this post is pretty similar to yours, and it contains almost same advice.
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 2 years ago.
I am new to CSS animations and not quite understanding what's going on.
Here is my snippet:
.test-container {
position: relative;
height: 200px;
background-color: pink;
}
.test {
fill: black;
position: absolute;
top: 0;
transform: scale(0.0075);
animation: scale 2s ease-out;
animation-iteration-count: 1;
}
#keyframes scale {
0% {
transform: scale(0.0075);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
<div class="test-container">
<svg class="test" height="2000" width="2000">
<circle cx="1000" cy="1000" r="1000" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
For some reason the snippet doesn't position the circle properly, but that isn't my issue.
What I would like for the animation to do is to start after 4 seconds and increase to the max size and then stay at that size (instead of going back to the small size).
Also, I would like it if the circle would bound the the container so that it doesn't expand over it like this:
Does anyone know how to achieve this?
I should also point out, that i am using an SVG because when I tried animating with a html circle, it lost it's quality, although that was because I was scaling up rather than down.
The snippet doesn't work as it does on my tests. It's supposed to start like this:
Then after 4 seconds I want it to start getting bigger:
Until it gets to it's maximum size:
The red border is to denote its "container". Imagine there is content above and below; I don't want the circle to ever overlap other content items.
I hope that makes more sense.
Update
Someone said this was answered, but it wasn't. It's not just the forwards state I need.....
I solved this issue myself anyway:
https://codepen.io/r3plica/pen/JjKxjPy
To get the animation to stay where it is at the end you use animation-fill-mode: forwards
To get it to start after 4 seconds use animation-delay: 4s
To stop the enlarged circle spilling out of the container set `overflow: hidden;
The code in the question has very large starting circle with a big reduction done through scaling. I have changed this the other way round so you start with a small circle drawn in the svg element and then expand it as that seemed easier than having to calculate reduction ratios.
How much you want the circle to expand and what you want to do about different aspect ratios of your viewport will be up to you, but here's the snippet that shows the basis of what you are looking for. Just play with the parameters to get the exact look you want (e.g. how big the enlarged circle is to be in relation to the height and/or width of the pink container).
.test-container {
position: relative;
height: 200px;
background-color: pink;
overflow-y:hidden;
}
.test {
fill: black;
position: absolute;
top: 90px;
left:0;
animation: scale 2s ease-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 4s;
}
#keyframes scale {
0% {
transform: scale(1);
opacity: 0;
}
100% {
transform: scale(15);
opacity: 1;
}
}
<div class="test-container">
<svg class="test" height="20" width="20">
<circle cx="10" cy="10" r="10" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
CSS allows to change the color of SVG like this
.clr {fill: green;}
But when I apply animation with the same fill attributes nothing seems to work. What should I do?
<svg width="800" height="600" style="background-color:lightblue">
<circle class="clr" cx="610" cy="240" r="4" fill="gold" />
<style>
.clr {animation: col 3s linear infinite;}
#keyframes col {
0%,71% {fill:none}
72% {fill:black}
75%,100% {fill:none}
}
</style>
</svg>
Its working as expected, I just increased the circle radius and changed its position to show it on 50x and 50y,
.color {animation: col 3s linear infinite;}
#keyframes col {
0%,71% {fill:none}
72% {fill:black}
75%,100% {fill:none}
}
<svg width="800" height="600" style="background-color:lightblue">
<circle class="color" cx="50" cy="50" r="30" fill="gold" />
</svg>
You Just add fill:black in #keyframes section. change it to green like this:
.color {animation: col 3s linear infinite;}
#keyframes col {
0%,71% {fill:none}
72% {fill:green}
75%,100% {fill:none}
}
<svg width="800" height="600" style="background-color:lightblue">
<circle class="color" cx="610" cy="240" r="4" fill="gold" />
</svg>
and don't want to use .color {fill: green;}.
You cannot animate from none (nothing) to green (something) for a smooth transition. Instead do:
#keyframes col {
0%, 71% { fill: none; } /* change attribute value to `inherit` */
72% { fill: black; }
75%, 100% { fill: none; } /* or change value to `currentcolor` */
}
Resulting in the following:
#keyframes col {
0%, 71% { fill: inherit; }
72% { fill: black; }
75%, 100% { fill: currentcolor; }
}
Then play around with the animation attribute or element.animate to achieve desired effect.
Following is the example from #Muhammad (because it is easier to see than the OP's example of a small dot in the lower right) of an svg with an inline style section. As I read the specification, it should work as is. However, browser support still seems to be lacking 3 years later, now in 2020.
SVG 2 Requirement: Add HTML5 ‘style’ element attributes to SVG's ‘style’ element.
Resolution: SVG 2 ‘style’ element shall be aligned with the HTML5 ‘style’ element.
Purpose: To not surprise authors with different behavior for the ‘style’ element in HTML and SVG content.
I have used VS Code with a plugin called jock.svg and the animation works as expected in the live preview pane. Just copy and save the svg code "as is" with a file extension of "svg".
It is hard to know what animation the OP was going for without a description because the code snippet is said to be not working.
For clarity I will describe what this example does: It displays a briefly (3% of the time) flashing black circle on a light blue background in the top left corner. Note that the original "gold" fill is ignored when the animation is working. Today in Safari (Mac, iPad), Chrome (iPad) and Edge (iPad), all I see is the "gold" circle. No animation is applied. Please comment if (when) your browser works. I suspect this hole in browser support will be filled in the future.
[Edit]
It works in Chrome 81.0.4044.92 (Mac)
<svg width="800" height="600" style="background-color:lightblue">
<circle class="color" cx="50" cy="50" r="30" fill="gold" />
<style>
.color {animation: col 3s linear infinite;}
#keyframes col {
0%,71% {fill:none}
72% {fill:black}
75%,100% {fill:none}
}
</style>
</svg>
How do I style the below attribute transform so that instead of becoming:
transform="translate(0,250)"
it becomes:
transform="translate(-45,250)"
so that it shifts the whole object -45 pixels to the left.
Below is the code:
<svg width="365" height="250">
<g class="x_ticks_d3 plain" transform="translate(0,250)"></g>
</svg>
If we talk about "styling" you can do sth. like this with CSS:
g.x_ticks_d3.plain {
-moz-transform: translateX(-45px);
-webkit-transform: translateX(-45px);
-o-transform: translateX(-45px);
-ms-transform: translateX(-45px);
transform: translateX(-45px);
}
But this is NOT changing the svg translation and furthermore the 250 in your svg might not always match pixels (remember the scalable vector thing).
The more promising way is manipulating the attribute using jQuery:
$("g").attr("transform", "translate(-45,250)");