ArunValaven February 2016

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!

Answers


Robert Longson February 2016

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/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAd 

Post Status

Asked in February 2016
Viewed 3,083 times
Voted 12
Answered 1 times

Search




Leave an answer