SVG animation scaling while keeping the group from moving on one end

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,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"/>
<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>

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

SVG animation scaling while keeping the group from moving on one end - animation

Related

SVG image does not show up in browsers

Hard svg animation

SVG - animate opacity

SVG image tag zoom in and out animation

SVG animate d attribute mousedown and return on mouseout

Categories

Resources