SVG image tag zoom in and out animation -


i have svg file various animations written me, can't able zoom image in image tag(i need animation). in svg circle tag works perfect zoom in , zoom out animation. please me giving solution in pure svg.

<image id="img_id" x="200" y="200" width="50" height="50" preserveaspectratio="none" xlink:href="my svg image 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 translate animation image till zooms 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>


Comments

Post a Comment

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

i have html progress meter: <div class="col-md-3" style="margin-left: -20px;"> <div class="progress-pos active" id="progess-1"> <div class="progress-pos-inner"> login </div> </div> </div> <div class="col-md-3 progress-pos-container"> <div class="progress-pos" id="progess-2"> <div class="progress-pos-inner"> scan items </div> </div> </div> <div class="col-md-3 progress-pos-container"> <div class="progress-pos" id="progess-3"> <div class="progress-pos-inner"> confirm address </div> </div> </div> <div class="col-md-3 progress-pos-container"> <div class="progress-pos" id="progess-4"> <div class="progress-pos-in...
Read more

caching - How to check if a url path exists in the service worker cache -

i need check if particular url path exists in service worker cache. example, suppose url is: /myserviceworker/service?a=110&b=70 this url exists in cache, there many of them different values of , b. now, suppose want refresh of these urls, how can that? i want know how access key values service worker cache. if know key, plan follows: var url = new url(key); if(url.pathname === "\/myserviceworker/service") refetch key but not sure how cache key , in format is. mean, string or url? cache api has match() method returns promise resolving in response object if match or undefined if no match exists. second parameter object can specify ignoresearch not take account url parameters. the ignoresearch option supported firefox ( chrome status here ). in other hand, retrieve cache entries, can use keys() method.
Read more

Redirect to a HTTPS version using .htaccess -

i need modify .htaccess file redirect urls https version without "www". http://example.com --> https://example.com http://www.example.com --> https://example.com https://www.example.com --> https://example.com this how .htaccess file looks like: rewriteengine on rewritecond %{request_filename} !-d rewritecond %{request_filename} !-f rewriterule ^(.*)$ redirect.php?id=$1&page=$2 [qsa,l] what modifications need make .htaccess in order forward https without "www"? it depends on doing current code. looks file called redirect trying display php page seo friendly url. think might confusing people. anyway, need , force https without www, need 1 more rule above. also second rule needs two capture groups in rewriterule test string because wanting 2 different values using $1 , $2 references. rewriteengine on #rediect www non www and/or http https --- combinations. rewritecond %{http_host} !^example\.com [nc,or] rewritecond %{https} !^...
Read more