SVG animation scaling while keeping the group from moving on one end - animation
I am trying to use svg animation to get a dragonfly to flap its wings.
I am doing this by scaling the left and right wing on the x axis. the problem is when I scale it the wing moves. I want the left or right edge of the wing to stay in one spot when it scales.
here is the code for one wing
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
Here is the whole svg code or you can see it in codepen
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-14.4 7.7 550.5 426.8" enable-background="new -14.4 7.7 550.5 426.8" xml:space="preserve">
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="wing_right">
<g>
<path fill="#88C9CE" d="M275.9,134c66.4,4.7,131.2,17.1,194.6,41.4c7.5,2.9,59.3,22.3,45.9,36.1c-14.8,15.2-87.7,19.9-109,14.6
C370.6,216.9,251.2,132.2,275.9,134z"/>
<path fill="#92D9DE" d="M285,113c16.2,3.1,244.8-39.1,249.2-29.7c12.3,26.3-36.8,53-54.4,59.8c-87.6,34-185.4,11.7-202.8-5.2
C271.1,132.1,274.2,110.9,285,113z"/>
<path fill="#FFFFFF" d="M451.2,98.5c25.6-4.3,28.9-4.8,58.9-8.8c1.9-0.3,16.3-1.3,15.6,4.3c-0.2,1.4-6.5,17.8-6,13.2
c0.1-0.8,0.9-9.8-1.3-12.5C513.9,88.7,445.7,99.5,451.2,98.5z"/>
<path fill="#76B0B3" d="M291.3,155.4c21.9,16.6,99.9,5.4,99.9,5.4s-54.7-0.2-86.7-9.9c-13.4-4.1-22.5-9.1-24.1-10.3
c0,0-0.8,0.9-1.8,1.6c0,0,0.1,2.2,0.1,2.2S287.6,152.7,291.3,155.4z"/>
</g>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s; wrFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wrFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="body" xmlns:inkpad="http://taptrix.com/inkpad/svg_extensions">
<g id="Layer_2" inkpad:layerName="body">
<path fill="#D9AC32" d="M253.8,83.2c-4.5-29.5-6.4-53.2-16-74.7c-0.8-1.9-4.3,1-3.4,1.6c0.4,0.2,12.6,13.5,17.3,73.2
C252.2,88.9,254.5,87.3,253.8,83.2z"/>
<path fill="#D9AC32" d="M272.2,82.6c5.2-29.3,7.8-53,17.9-74.3c0.9-1.9,4.3,1.1,3.3,1.7c-0.4,0.2-12.9,13.2-19.1,72.7
C273.7,88.2,271.5,86.6,272.2,82.6z"/>
<path fill="#FFE008" d="M249.8,128.8l28.2-0.4c0,0,10.4,208,2.7,260.4c-10.3,71.1-18.9,49.7-27.9,0.4
C243.4,337.1,249.8,128.8,249.8,128.8z"/>
<path fill="#FFE008" d="M242.5,130.2c-0.2-12,9-21.8,20.6-22c11.5-0.2,21.1,9.4,21.2,21.4c0.2,12-9.7,17-21.2,17.2
C251.5,146.9,242.7,142.2,242.5,130.2z"/>
<path fill="#FFE008" d="M236.8,110.7c-0.3-18.4,12-32.8,26.5-33c14.5-0.2,25.8,13.9,26.1,32.2c0.3,18.4-11.7,25.1-26.3,25.3
C248.6,135.4,237.1,129,236.8,110.7z"/>
</g>
<g id="Layer_3" inkpad:layerName="eyes">
<g>
<path fill="#F5F2E1" d="M227.8,95.9c-0.1-8.3,7.2-15.1,16.4-15.3c9.2-0.1,16.7,6.5,16.8,14.8c0.1,8.3-7.2,15.1-16.4,15.3
C235.4,110.9,227.9,104.2,227.8,95.9z"/>
<path d="M255.1,92c-0.6,1.6-7.3-5.5-19.7,3.7c-2.4,1.8-1.8-4.6-0.1-6C244.1,82.6,255.8,90.4,255.1,92z"/>
<path fill="#D8E6C3" d="M228,96.2c-0.1-5.4,2.1,9.9,15.5,11.1c8.1,0.7,14.5-2.9,14.2-2.5c-3.9,4.4-9,5.5-10.5,5.7
C236.8,111.8,228.2,106.5,228,96.2z"/>
</g>
<g>
<path fill="#F5F2E1" d="M295.8,94.9c-0.1-8.3-7.7-14.9-16.8-14.8c-9.2,0.1-16.5,7-16.4,15.3c0.1,8.3,7.7,14.9,16.8,14.8
C288.6,110.1,295.9,103.2,295.8,94.9z"/>
<path d="M268.3,91.8c0.7,1.6,7.1-5.7,19.8,3.1c2.5,1.7,1.7-4.7-0.1-6C279.1,82.1,267.6,90.3,268.3,91.8z"/>
<path fill="#D8E6C3" d="M295.5,95.2c-0.1-5.4-1.8,9.9-15.2,11.5c-8.1,1-14.6-2.5-14.3-2.1c4,4.3,9.2,5.2,10.7,5.4
C287.2,111,295.7,105.5,295.5,95.2z"/>
</g>
</g>
<path fill="#E5C907" d="M242.6,127.9c0-0.1,4.8,8.1,22.5,7.2c13.6-0.7,19-8.1,19-8.1c-0.4,4.9-11.3,11.2-18.3,11.6
C260.3,139,247.3,137.3,242.6,127.9z"/>
<path fill="#E5C907" d="M249.3,143.6c0,0,6,3.9,15,3.2c10.4-0.8,14.4-4.7,14.4-4.6c0.2,4.1,0.5,8.3,0.4,8.6
c-3.5,7.1-20.6,9.4-29.8,2C249,152.5,249.3,147.1,249.3,143.6z"/>
</g>
</svg>
The problem here is that the origin for all scale transforms is at (0,0) which is at the top left of the SVG. So your scale animations are centred on the left side of the SVG (x=0).
Basically you need to move the coordinate space for the wings, so that when the scale is applied, the wings are centred on x=0.
So the steps would be:
Use a translate transform to move your wings so they are centred at x=0
apply your scale animation in this coordinate space
surround that with a group with a transform that moves them back to their original position
For example:
<g id="wings" transform="translate(270,0)">
<g>
<g transform="translate(-270,0)">
<g "left wing">
<g "right wing">
</g>
<animateTransform .../>
</g>
</g>
Demo here
Related
SVG image does not show up in browsers
I have this SVG image, made in Inkscape which shows the following in Inkscape: However, when I open the SVG in a browser (Chrome, Firefox), nothing appears. I have tried adding "simple" lines and objects to the image, and they DO appear, so it seems to be something with this specific object. What could it be? And how to fix it? <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg width="65.834572mm" height="70.733879mm" viewBox="0 0 65.834572 70.733879" version="1.1" id="svg13961" inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)" sodipodi:docname="test.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <sodipodi:namedview id="namedview13963" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" showgrid="false" inkscape:zoom="0.63874158" inkscape:cx="161.25457" inkscape:cy="270.06227" inkscape:window-width="529" inkscape:window-height="862" inkscape:window-x="534" inkscape:window-y="18" inkscape:window-maximized="1" inkscape:current-layer="layer1" /> <defs id="defs13958"> <clipPath clipPathUnits="userSpaceOnUse" id="clipPath16097"> <g id="g16109"> <g id="g16107" transform="translate(162.0894,-8.96869)"> <g id="g16105"> <g id="g16103"> <g id="g16101"> <path d="M 0,595.2 H 841.7 V 0 H 0 Z" id="path16099" /> </g> </g> </g> </g> </g> </clipPath> </defs> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-61.940456,-78.545196)"> <path d="m 384.899,184.03111 c 40.89063,-0.26977 82.65532,5.96811 119.21947,25.15083 23.45592,12.13347 47.3093,25.37475 74.13169,27.82215 6.70195,0.79044 13.4529,1.13004 20.19984,1.13002" style="display:inline;opacity:1;fill:none;stroke:#000000;stroke-width:127.501;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path60" clip-path="url(#clipPath16097)" transform="matrix(0.00761114,0.32814968,0.35268292,-0.00818017,16.590019,-45.732392)" /> </g> </svg>
Hard svg animation
I need your help with the implementation of svg animation. https://youtu.be/lrWjkARl8Zg (sorry for the poor video quality) And I have such a structure of svg I need the arrow (class = "arrow") itself to move along long lines and draw it. <svg class="vector" width="1193" height="329" viewBox="0 0 1193 329" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="long_line" d="M1436 327.98L84.7148 327.98C73.8082 328.219 62.9639 326.275 52.818 322.262C42.6722 318.249 33.4293 312.249 25.6315 304.613C17.8337 296.977 11.6384 287.858 7.40866 277.793C3.17891 267.728 0.999997 256.919 0.999996 246C0.999996 235.081 3.17891 224.272 7.40866 214.207C11.6384 204.142 17.8337 195.023 25.6315 187.387C33.4292 179.751 42.6722 173.75 52.818 169.738C62.9638 165.725 73.8082 163.781 84.7147 164.02L589.173 164.02" stroke="black" stroke-width="2" stroke-miterlimit="10"/> <path class="arrow" d="M544 204L589 164L548 124" stroke="black" stroke-width="2"/> <path class="arrow" d="M504 1L459 41L500 81" stroke="black" stroke-width="2"/> <path class="short_line" d="M1308 41L459 41" stroke="black" stroke-width="2" stroke-miterlimit="10"/> </svg> Advise which library I can use
You could do this using svg smil animations:
A Guide to SVG Animations (SMIL)
Your arrow animations could be achieved by
<animateMotion> for moving the arrow element and
animating the stroke-dashoffset property.
Animated example
svg {
border: 1px solid #ccc;
width: 33%;
overflow: visible;
display: block;
}
path {
stroke-width: 10;
stroke: #000;
}
<p>Click on animation for replay</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1443,126H594" />
</g>
<animateMotion href="#arrow1" dur="2" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-long" />
</animateMotion>
<animate attributeType="XML" href="#mpath-long" id="strokeAni" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" begin="0;graphics.click" fill="freeze" />
<animateMotion href="#arrow2" dur="2s" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-short" />
</animateMotion>
<animate attributeType="XML" href="#mpath-short" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" fill="freeze" begin="0;graphics.click" />
</svg>
Quite likely, you will have to tweak your svg viewBox to get the desired result.
A common trick is to position element that's supposed to move along the motion path to x/y = 0.
Static example
<style>
svg{
border: 1px solid #ccc;
width: 33%;
overflow:visible;
display:block;
}
path{
stroke-width:10;
stroke: #000;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1443,126H594" />
</g>
</svg>
SVG - animate opacity
could you please help me out, how to create SVG animation, which will behave like this? https://framer.cloud/aSUDY/ I did my best, but it always misbehaves :-( Here is my code, where I used 6 animations to cycle through (3 to animate from 0.5 to 1 opacity and three to animate vice versa) <?xml version="1.0" encoding="UTF-8"?> <svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;"> <defs> <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" > <animate id="anim1" attributeType="xml" attributeName="fill-opacity" begin="0s;anim33.end" from="0.5" to="1" dur="1s" fill="freeze" /> </ellipse> <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z"> <animate id="anim2" attributeType="xml" attributeName="fill-opacity" begin="anim1.end" from="0.5" to="1" dur="1s" fill="freeze" /> </path> <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z"> <animate id="anim3" attributeType="xml" attributeName="fill-opacity" begin="anim2.end" from="0.5" to="1" dur="1s" fill="freeze" /> </path> <ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" > <animate id="anim11" attributeType="xml" attributeName="fill-opacity" begin="anim3.end" from="1" to="0.5" dur="0.1" fill="freeze" /> </ellipse> <path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z"> <animate id="anim22" attributeType="xml" attributeName="fill-opacity" begin="anim11.end" from="1" to="0.5" dur="0.1" fill="freeze" /> </path> <path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z"> <animate id="anim33" attributeType="xml" attributeName="fill-opacity" begin="anim22.end" from="1" to="0.5" dur="0.1" fill="freeze" /> </path> </defs> <g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5"> <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path> </g> <g id="CON3" transform="translate(18.000000, 2.000000)" > <use xlink:href="#CON33" ></use> </g> <g id="CON2" transform="translate(16.000000, 4.000000)" > <use xlink:href="#CON22" ></use> </g> <g id="CON1" transform="translate(15.000000, 5.000000)" > <use xlink:href="#CON11" ></use> </g> </svg>
I've changed the animations to use values, they don't really need to be linked. I've removed the duplication and the elements that really were'nt doing anything other than add complexity. <svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;"> <g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5"> <path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path> </g> <g id="CON3" transform="translate(18.000000, 2.000000)" > <path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z"> <animate id="anim3" attributeType="xml" attributeName="fill-opacity" begin="0s" values="0.5;0.5;0.5;0.5;1" dur="2s" repeatCount="indefinite" /> </path> </g> <g id="CON2" transform="translate(16.000000, 4.000000)" > <path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z"> <animate id="anim2" attributeType="xml" attributeName="fill-opacity" begin="0s" values="0.5;0.5;0.5;1;1" dur="2s" repeatCount="indefinite" /> </path> </g> <g id="CON1" transform="translate(15.000000, 5.000000)" > <ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" > <animate id="anim1" attributeType="xml" attributeName="fill-opacity" begin="0s" values="0.5;0.5;1;1;1" dur="2s" repeatCount="indefinite" /> </ellipse> </g> </svg>
SVG image tag zoom in and out animation
I have my SVG file with various animations written by me, i can't able to zoom image in image tag(I need it as an animation). In SVG circle tag works perfect for zoom in and zoom out animation. please anyone help me by giving your solution in pure SVG. <image id="img_id" x="200" y="200" width="50" height="50" preserveAspectRatio="none" xlink:href="my svg image as vector code"/> <animateTransform xlink:href="#img_id" begin="1s" values="-150,-150; 0,0" dur="0.5s" type="translate" attributeName="transform" fill="freeze" additive="sum"/> <animateTransform xlink:href="#img_id" begin="1s" values="2; 1" dur="0.5s" type="scale" attributeName="transform" fill="freeze" additive="sum"/> My SVG code in JSfiddle!
Adjust the translate animation for the image till it zooms from its centre. I.e. <svg version="1.1" width="512" height="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <circle id="trigger" class="button" cx="150" cy="150" r="25" /> <animateTransform begin="1s" values="-150,-150; 0,0" dur="0.5s" type="translate" attributeName="transform" fill="freeze" additive="sum"/> <animateTransform begin="1s" values="2; 1" dur="0.5s" type="scale" attributeName="transform" fill="freeze" additive="sum"/> </g> <image id="img_id" x="213" y="233" width="50" height="50" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAK T2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AU kSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXX Pues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgAB eNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAt AGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3 AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dX Lh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+ 5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk 5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd 0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA 4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzA BhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/ph CJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5 h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+ Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhM WE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQ AkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+Io UspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdp r+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZ D5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61Mb U2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY /R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllir SKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79u p+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6Vh lWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1 mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lO k06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7Ry FDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3I veRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+B Z7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/ 0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5p DoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5q PNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIs OpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5 hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQ rAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9 rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1d T1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aX Dm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7 vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3S PVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKa RptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO 32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21 e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfV P1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i /suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8 IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADq YAAAOpgAABdvkl/FRgAAAOBJREFUeNpi/P//PwMtAeP/HIZ+BgaGAlpaQFMvMDHQGAxnC2QMIJiB gYGBU4AGFgT1QzDMssb7DAzmCTQMIiEFBoaY+QwMefsZGFQdaBgHqg4QS/L2I4KQJpGs6sDAUH4e 4ishBRqmIvMESPx4NWBNDNRLpp71EIscCmiYDw5MZGA4uQBFiIUqBp9cwMCwrZGB4d0DDCnKLLh9 gIFhXSEDw5MLOJWQZ8GTCxCDbx8gqJQ0C949gAQFWjhTbsH3DwwM2xsZGLY1ULHCgeVSPOFLmQ8o NHi0RiPJggm0tAAwALJMOov2khwjAAAAAElFTkSuQmCC"/> <animateTransform xlink:href="#img_id" begin="1s" values="-238,-258; 0,0" dur="0.5s" type="translate" attributeName="transform" fill="freeze" additive="sum"/> <animateTransform xlink:href="#img_id" begin="1s" values="2; 1" dur="0.5s" type="scale" attributeName="transform" fill="freeze" additive="sum"/> </svg>
SVG animate d attribute mousedown and return on mouseout
I am trying to get this Emoji to frown on mouse over starting from a blank stare then return to the frown on mouseout. Basically have an animate path applied from and to for a repeat duration of one then reset on mouseout. I have read a bunch of articles but an confused if this using from and to vs animatetransform is the best. Below is the svg the animation I want to include in without external CSS or Jquery. Thanks in advance. <svg width="189px" height="189px" viewBox="0 0 189 189" version="1.1"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill- rule="evenodd" sketch:type="MSPage"> <g id="unsatisfied-head" sketch:type="MSLayerGroup"> <g id="g10" transform="translate(94.500000, 94.655027) scale(1, -1) translate(-94.500000, -94.655027) translate(0.000000, 0.655027)"> <g id="g12"> <g id="unsatified-head-box"> <mask id="mask-2" sketch:name="path18" fill="white"> <use xlink:href="#path-1"></use> </mask> <g id="path18"></g> <g id="head-container"> <g transform="translate(9.904041, 9.879125)"> <g id="head-bg"> <path d="M168.368696,83.9725634 C168.368696,37.5950106 130.678868,0 84.1843479,0 C37.6947798,0 0,37.5950106 0,83.9725634 C0,130.345177 37.6947798,167.945127 84.1843479,167.945127 C130.678868,167.945127 168.368696,130.345177 168.368696,83.9725634" id="path22" fill="#FFCC4D" sketch:type="MSShapeGroup"></path> </g> <g id="left-eye" transform="translate(44.568184, 88.912126)"> <path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path26" fill="#664500" sketch:type="MSShapeGroup"></path> </g> <g id="right-eye" transform="translate(103.992430, 88.912126)"> <path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path30" fill="#664500" sketch:type="MSShapeGroup"></path> </g> <g id="mouth" transform="translate(36.967823, 31.754472)"> <path d="M74.280307,0 L4.95202046,0 C2.21850517,0 0,2.20798446 0,4.93956255 C0,7.67114064 2.21850517,9.8791251 4.95202046,9.8791251 L74.280307,9.8791251 C77.0187743,9.8791251 79.2323274,7.67114064 79.2323274,4.93956255 C79.2323274,2.20798446 77.0187743,0 74.280307,0" id="path34" fill="#664500" sketch:type="MSShapeGroup"></path> <animate attributeType="XML" dur="10s" begin="mouseoff" attributeName="d" restart="whenNotActive" repeatCount="1" fill="freeze" from="M74.280307,0 L4.95202046,0 C2.21850517,0 0,2.20798446 0,4.93956255 C0,7.67114064 2.21850517,9.8791251 4.95202046,9.8791251 L74.280307,9.8791251 C77.0187743,9.8791251 79.2323274,7.67114064 79.2323274,4.93956255 C79.2323274,2.20798446 77.0187743,0 74.280307,0" to="M0.990404093,0.98791251 C1.87186374,0.192642939 3.18910118,0.143247314 4.13493709,0.844665196 C4.32806589,0.98791251 23.5567613,15.1693966 47.2175151,15.1693966 C70.8188447,15.1693966 90.1119164,0.98791251 90.3000932,0.844665196 C91.2459291,0.143247314 92.5631665,0.202522065 93.4446262,0.98791251 C94.3211338,1.77824252 94.5192146,3.08228703 93.9101161,4.08995779 C93.2713054,5.15196374 77.9794662,29.9880842 47.2175151,29.9880842 C16.455564,29.9880842 1.15877279,5.15196374 0.524914169,4.08995779 C-0.0841843479,3.07734747 0.10894445,1.77824252 0.990404093,0.98791251"/> </g> </g> </g> </g> </g> </g> </g> </g> </svg>
There are a few errors : your <animate> should be inside the <path>and </path> tags or you have to use its xlink:href property if you really want to see the shape animated, you'll have to make your destination shape with the same number of points your original shape has the mouseoff event doesn't exists, maybe you wanted mouseup <svg width="189px" height="189px" viewBox="0 0 189 189" version="1.1"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill- rule="evenodd" sketch:type="MSPage"> <g id="unsatisfied-head" sketch:type="MSLayerGroup"> <g id="g10" transform="translate(94.500000, 94.655027) scale(1, -1) translate(-94.500000, -94.655027) translate(0.000000, 0.655027)"> <g id="g12"> <g id="unsatified-head-box"> <mask id="mask-2" sketch:name="path18" fill="white"> <use xlink:href="#path-1"></use> </mask> <g id="path18"></g> <g id="head-container"> <g transform="translate(9.904041, 9.879125)"> <g id="head-bg"> <path d="M168.368696,83.9725634 C168.368696,37.5950106 130.678868,0 84.1843479,0 C37.6947798,0 0,37.5950106 0,83.9725634 C0,130.345177 37.6947798,167.945127 84.1843479,167.945127 C130.678868,167.945127 168.368696,130.345177 168.368696,83.9725634" id="path22" fill="#FFCC4D" sketch:type="MSShapeGroup"></path> </g> <g id="left-eye" transform="translate(44.568184, 88.912126)"> <path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path26" fill="#664500" sketch:type="MSShapeGroup"></path> </g> <g id="right-eye" transform="translate(103.992430, 88.912126)"> <path d="M0,19.7582502 C0,19.7582502 0,29.6373753 9.90404093,29.6373753 C19.8080819,29.6373753 19.8080819,19.7582502 19.8080819,19.7582502 L19.8080819,9.8791251 C19.8080819,9.8791251 19.8080819,0 9.90404093,0 C0,0 0,9.8791251 0,9.8791251 L0,19.7582502 L0,19.7582502 Z" id="path30" fill="#664500" sketch:type="MSShapeGroup"></path> </g> <g id="mouth" transform="translate(36.967823, 31.754472)"> <path id="path34" fill="#664500" d="M0,4.9C0.4,0.9,3.6-0.1,5,0c0.2,0.1,19.8,0,43.5,0C72,0,67.2,0,75.1,0c0.7-0.1,4.2,1.4,4.2,4.9c0,2.5-2.3,4.9-4.4,4.9c-2.3,0-2.3,0-33.1,0S8.2,10,5,9.9C3.6,9.9-2.4,9,0.9,1.3"> <animate attributeType="XML" dur="2s" begin="mouseup" attributeName="d" repeatCount="1" fill="freeze" to="M1,1c0.9-0.8,2.2-0.8,3.1-0.1C4.3,1,23.6,15.2,47.2,15.2C70.8,15.2,90.1,1,90.3,0.8c0.9-0.7,2.3-0.6,3.1,0.1c0.9,0.8,1.1,2.1,0.5,3.1C93.3,5.2,78,30,47.2,30S1.2,5.2,0.5,4.1C-0.1,3.1,0.1,1.8,1,1" /> </path> </g> </g> </g> </g> </g> </g> </g> </g> </svg>