+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: SVG animation (/showthread.php?tid=45)
SVG animation - buuuudzik - 23.07.2015
Hi,
How to prepare animation .svg file in the visualization on the Logic Machine?
Thanks,
Sławek Budzyński
RE: SVG animation - admin - 23.07.2015
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.
RE: SVG animation - buuuudzik - 24.07.2015
(23.07.2015, 13:33)admin Wrote: 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".
RE: SVG animation - admin - 24.07.2015
Quote: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?
RE: SVG animation - buuuudzik - 24.07.2015
(24.07.2015, 09:37)admin Wrote:Quote: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?
RE: SVG animation - Tinysprings - 29.07.2015
You could try may be to put a transparent svg icon linked to the group address on top of the animated svg ?
RE: SVG animation - admin - 29.07.2015
Working example attached
RE: SVG animation - buuuudzik - 31.07.2015
(29.07.2015, 06:30)admin Wrote: 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" xml
pace="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/Web/SVG/Element/animateTransform). This code is between <path fill=....> and </path>
RE: SVG animation - domotiqa - 01.03.2016
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.
RE: SVG animation - benanderson_475 - 13.07.2021
(29.07.2015, 06:30)admin Wrote: 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?
RE: SVG animation - admin - 13.07.2021
You can simply use two icons - one with animation and another without.
RE: SVG animation - benanderson_475 - 13.07.2021
(13.07.2021, 05:37)admin Wrote: 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
RE: SVG animation - khalil - 09.03.2022
Hello
Great how Clock works
Is there an Icon for date?
BR,
RE: SVG animation - admin - 09.03.2022
See this: https://shkspr.mobi/blog/2018/02/this-svg-always-shows-todays-date/