This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

SVG animation
#8
(29.07.2015, 06:30)admin Wrote: Working example attached Smile

There is some option. Thank you Big Grin

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

<?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" xmlConfusedpace="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>
Reply


Messages In This Thread
SVG animation - by buuuudzik - 23.07.2015, 07:21
RE: SVG animation - by admin - 23.07.2015, 13:33
RE: SVG animation - by buuuudzik - 24.07.2015, 07:59
RE: SVG animation - by admin - 24.07.2015, 09:37
RE: SVG animation - by buuuudzik - 24.07.2015, 11:53
RE: SVG animation - by Tinysprings - 29.07.2015, 06:04
RE: SVG animation - by admin - 29.07.2015, 06:30
RE: SVG animation - by buuuudzik - 31.07.2015, 07:12
RE: SVG animation - by benanderson_475 - 13.07.2021, 05:31
RE: SVG animation - by domotiqa - 01.03.2016, 15:08
RE: SVG animation - by admin - 13.07.2021, 05:37
RE: SVG animation - by benanderson_475 - 13.07.2021, 05:46
RE: SVG animation - by khalil - 09.03.2022, 08:57
RE: SVG animation - by admin - 09.03.2022, 13:05

Forum Jump: