SVG animation

[buuuudzik]

Hi,

How to prepare animation .svg file in the visualization on the Logic Machine?

Thanks,
Sławek Budzyński

[admin]

What kind of animation do you want to add?

Please see the attached SVG file as an example. Keep in mind that it will not work as an object icon only as a separate image.

[buuuudzik]

What kind of animation do you want to add?

Please see the attached SVG file as an example. Keep in mind that it will not work as an object icon only as a separate image.

Thank you for your answer

I'd like to know how to add:
1) some motion icon e.g. spinning fan 1-stage or 3-stage fan,
2) some motion icon in menu.

In what application do you prepare clock.svg graphics?

I checked clock.svg on the visualisation demo and clock is working when I import it by "Image" object and clock is not working when I import it by "Link" or "Object".

[admin]

I checked clock.svg on the visualisation demo and clock is working when I import it by "Image" object and clock is not working when I import it by "Link" or "Object".

Yes, because SVG uses scripting and it's only available as a separate image but not as an icon.

SVG can be created in Inkscape, Illustrator or any other vector editor that can export SVG. Animation might require adding some JavaScript manually.

In your case maybe an animated GIF is the easiest solution?

[buuuudzik]

I checked clock.svg on the visualisation demo and clock is working when I import it by "Image" object and clock is not working when I import it by "Link" or "Object".

Yes, because SVG uses scripting and it's only available as a separate image but not as an icon.

SVG can be created in Inkscape, Illustrator or any other vector editor that can export SVG. Animation might require adding some JavaScript manually.

In your case maybe an animated GIF is the easiest solution?

Yes, but isn't scalable
In what application do you embedding js code?

[Tinysprings]

You could try may be to put a transparent svg icon linked to the group address on top of the animated svg ?

[admin]

Working example attached

[buuuudzik]

Working example attached

There is some option. Thank you

By the way, I learned a little about the structure of .svg files and editing it in Notepad

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56 56" enable-background="new 0 0 56 56" xmlpace="preserve">
<circle fill="#6BB2DC" cx="28" cy="28" r="28"/>
<g>
<path fill="#FFFFFF" d="M31.853,27.044c1.209-0.434,3.227-0.71,5.165,0.366c3.293,1.829,6.39-0.953,5.938-4.036
c-0.399-2.73-2.086-5.511-4.228-6.628c-3.203-1.67-5.629-0.74-7.506,1.297c-1.229,1.335-2.515,3.689-2.614,5.929
c-0.048,1.054-1.271,0.998-1.565,0.177c-0.435-1.209-0.71-3.227,0.365-5.164c1.83-3.294-0.953-6.391-4.034-5.94
c-2.731,0.401-5.512,2.087-6.629,4.229c-1.67,3.203-0.74,5.628,1.297,7.505c1.335,1.229,3.69,2.516,5.929,2.615
c1.055,0.047,0.999,1.271,0.178,1.565c-1.21,0.435-3.229,0.71-5.165-0.366c-3.295-1.83-6.391,0.954-5.939,4.035
c0.399,2.731,2.086,5.511,4.229,6.629c3.203,1.669,5.629,0.74,7.505-1.297c1.229-1.335,2.516-3.69,2.614-5.929
c0.047-1.055,1.271-0.999,1.565-0.18c0.435,1.211,0.711,3.229-0.366,5.167c-1.829,3.293,0.954,6.39,4.036,5.938
c2.73-0.398,5.511-2.084,6.628-4.228c1.671-3.204,0.74-5.627-1.297-7.506c-1.334-1.228-3.69-2.515-5.928-2.613
C30.976,28.563,31.031,27.338,31.853,27.044z M28,29.522c-0.84,0-1.521-0.681-1.521-1.521c0-0.84,0.682-1.521,1.521-1.521
c0.841,0,1.521,0.682,1.521,1.521C29.521,28.842,28.841,29.522,28,29.522z">
   <animateTransform attributeName="transform" type="rotate" from="0 28 28" to="360 28 28" dur="5s" repeatDur="indefinite"/>
</path>
</g>
</svg>


-SOME INFO ABOUT STRUCTURE-
<g> grouping objects
<path fill=....> this is the fan on out image
<animateTransform attri....> this is the code which animating our fan (more info -> https://developer.mozilla.org/en-US/docs...eTransform). This code is between <path fill=....> and </path>

[domotiqa]

cool, I modify the clock to have a counter animation

It's ok but I need to put the GA in the SVG script.

Is there a way to use for example the class specify in the design ?
Should be great to put in the class field the GA and to take it in the script.

J'ai essayé de voire ce que donnait
this.parentNode.parentNode.className

mais ca marche pas.
Je fouille un peu le javascript.

[benanderson_475]

Working example attached

It is possible to include a bool obj into this fan image attached in above post, so when obj '1/1/1' is true it rotates? otherwise it stops?

[admin]

You can simply use two icons - one with animation and another without.

[benanderson_475]

You can simply use two icons - one with animation and another without.

Why did i not think of that.... !!! Yes this is what i will do
Many Thanks

[khalil]

Hello 
Great how Clock works 
Is there an Icon for date?
BR,

[admin]

See this: https://shkspr.mobi/blog/2018/02/this-sv...days-date/