svg-action

Version:

控制SVG拖动，缩放，旋转，转图片等

64 lines (62 loc) • 9.34 kB

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <script src="../src/index.js" type="module"></script> </head> <body> <div class="main">     <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="958"><path d="M512 272.8554671c-19.4965329 0-38.2165329 1.38666645-56.1877329 4.0213329-22.7413329 3.2725329-43.9296-11.78666678-47.34080033-33.6682671-3.43893322-21.88160033 12.2026671-42.29333355 34.944-45.56586645 22.04799967-3.2170671 44.928-4.90880032 68.58453323-4.90879935 171.0037329 0 295.776 88.74666645 375.6757329 173.33333257a742.0330671 742.0330671 0 0 1 111.98720032 155.19573323c2.496 4.7424 4.93653322 9.5125329 7.29386678 14.33813355l0.41600032 0.91520032 0.16639935 0.33279968v0.08320065l0.02773388 0.0277329-37.99466678 16.30719967 38.05013355 16.30720065-0.08320065 0.11093258-0.08319967 0.2218671-0.33279968 0.7210671a608.7466671 608.7466671 0 0 1-22.04800065 40.60159935 751.12959967 751.12959967 0 0 1-66.144 93.8218671 42.7093329 42.7093329 0 0 1-58.10133322 5.9904 39.07626645 39.07626645 0 0 1-7.0165329-55.85493323 669.31626645 669.31626645 0 0 0 69.3888-101.92000065 661.99466677 661.99466677 0 0 0-97.0666671-133.25866612C754.72213355 344.35199968 650.61119967 272.8554671 512 272.8554671z m457.59999967 280.41173258l37.99466678 16.30720065a38.82666645 38.82666645 0 0 0 0-32.61440033l-37.99466677 16.30719968zM195.09119967 363.40480032c8.18133322 7.15520033 13.03466677 17.13920032 13.56160066 27.73333291 0.4992 10.62186645-3.38346645 20.9941329-10.81600065 28.84266645a662.1888 662.1888 0 0 0-97.06666613 133.2864 662.38293322 662.38293322 0 0 0 97.06666613 133.2864C269.33333322 762.15466678 373.38880033 833.67893323 512 833.67893323a384.93866678 384.93866678 0 0 0 131.04-22.65813323c21.35466645-7.2106671 44.76159967 3.38346645 52.6933329 23.79519968 7.90400032 20.41173322-2.55146677 43.1530671-23.57333258 51.22346677A471.10613355 471.10613355 0 0 1 512 913.80053322c-171.0037329 0-295.776-88.74666645-375.6757329-173.33333355a741.89439967 741.89439967 0 0 1-111.98720032-155.19573322c-2.496-4.7146671-4.93653322-9.5125329-7.29386678-14.33813355l-0.41600032-0.91519935-0.16639935-0.33280065-0.02773388-0.0554658v-0.05546678l37.99466678-16.30720065L16.34986678 536.96l0.05546677-0.0277329 0.0277329-0.08320065 0.13866645-0.33279968 0.41600032-0.91520032 1.58079968-3.10613355c8.59733355-17.02826677 18.02666677-33.6682671 28.12160032-49.89226612a744.41813355 744.41813355 0 0 1 89.5786671-116.5354671 42.26559967 42.26559967 0 0 1 28.84266645-13.03466678c11.0101329-0.5269329 21.79839967 3.2170671 29.952 10.37226743zM54.40000033 553.26719968L16.40533355 536.96a38.82666645 38.82666645 0 0 0 0 32.61440033l37.99466677-16.30720065z" p-id="959"></path><path d="M470.87146678 368.2304c0-22.2144 18.52586678-40.24106678 41.37813322-40.24106678 124.91093355 0 223.50293355 101.78133322 223.50293355 224.16853388 0 14.36586645-7.90400032 27.65013322-20.6890671 34.86079935a42.432 42.432 0 0 1-41.40586612 0 40.04693355 40.04693355 0 0 1-20.6890671-34.86079935c0-80.8426671-64.47999967-143.68640032-140.71893323-143.68640032-22.85226645 0-41.37813322-18.02666677-41.37813322-40.24106678z m-127.65653355 104.3328c22.35306645 4.68693322 36.55253355 26.06933355 31.75466677 47.81226645a147.264 147.264 0 0 0-3.43893322 31.78240065c0 80.8426671 64.47999967 143.68640032 140.71893322 143.68639935 10.92693322 0 21.52106677-1.248 31.6714671-3.60533355 22.1866671-5.2416 44.56746645 8.04266678 49.92 29.6469342 5.40800032 21.60426645-8.2645329 43.34720032-30.47893387 48.56106645a223.33653322 223.33653322 0 0 1-51.11253323 5.82399967c-124.91093355 0-223.50293355-101.78133322-223.50293355-224.1685329 0-16.64000032 1.83039967-33.00266678 5.29706678-48.672 2.30186677-10.42773323 8.79146677-19.55199967 18.02666677-25.34826742 9.2074671-5.82399968 20.41173322-7.79306677 31.14453323-5.5466658v0.0277329zM110.50453355 121.32053323a42.23786678 42.23786678 0 0 1 58.51733355-1e-8L913.99466645 845.63200032c15.6970671 15.80799967 15.4752 40.9066671-0.4992 56.40960001a42.23786678 42.23786678 0 0 1-58.01813355 0.4992L110.50453355 178.22933323a39.4645329 39.4645329 0 0 1 0-56.90880001z" p-id="960"></path></svg> <div> <button onclick="gs.up()">上移</button> <button onclick="gs.down()">下移</button> <button onclick="gs.left()">左移</button> <button onclick="gs.right()">右移</button> </div> <div> <button onclick="gs.zoomIn()">放大</button> <button onclick="gs.zoomOut()">缩小</button> </div> <div> <button onclick="gs.rotate(-90)">向左旋转</button> <button onclick="gs.rotate()">向右旋转</button> </div> <div> <button onclick="gs.flipX()">水平翻转</button> <button onclick="gs.flipY()">垂直翻转</button> </div> <div> <button onclick="gs.reset()">居中</button> <button onclick="gs.save()">保存</button> </div> <input> </div> <script> window.onload = function(){ window.gs = new SvgAction(document.getElementById('svg'), { range: { min: 0.001, max: 100 } }); }; </script> <style> .main{ height: 600px; width: 100%; } .main svg{ border: 1px solid red; width: 600px; height: 600px; } </style> </body> </html>