作図ツールで描いた絵をcssのみで表現する
- INKSCAPEで絵を描いてSVG保存
- https://github.com/shogo82148/svg2css のツールを使い変換
参考にしたサイト
http://shogo82148.github.io/homepage/soft/internet/svg2css/slide.html#slide30
CSSで作図された図をマウスのdrag&dropで動かす
メモ
Shell
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script language="JavaScript"> $(function(){ $('#draggable_battery').draggable({ stop: function(){ var ofs = $('#draggable_battery').offset(); alert("X=" + ofs.left + ": Y=" + ofs.top); } }); }); </script> <style type="text/css"> .battery { border: 8px solid black; width: 50px; height: 30px; position: relative; cursor:pointer; z-index:200; } .battery:before { content: ""; display: block; position: absolute; width: 10px; height: 20px; top: 3px; left: 2px; background: black; box-shadow: 0 4px, 13px 0, 13px 4px, 26px 0, 26px 4px, 56px 3px; } </style> </head> <body> <div id="draggable_battery" class="battery" ></div> </body></html> |
Shell
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<html> <head> <link rel="stylesheet" href="./icono.min.css"/> <style type="text/css"> .allow:before { border-bottom: 3px solid #557777; border-right : 3px solid transparent; display : block; height : 0; position : absolute; right : -3px; top : 0; width : 0; } </style> <script src="./jquery.min.js"></script> <script src="./jquery-ui.min.js"></script> <script language="Javascript"> $(function(){ var hosts = [ "L2SW11", "L2SW12", "L2SW13", "L2SW14", "L2SW15", "L2SW16", "L2SW17", "L2SW18", "L2SW19", "L2SW1a", "L2SW1b" ]; for(var i=0; i<hosts .length; i++){ var id = "#" + hosts[i]; $(id).draggable({ stop: function(){ var ofs = $(id).offset(); alert("ID=" + this.id + " : X=" + ofs.left + " : Y=" + ofs.top); } }); } }); </script> </hosts></script></head> <body> <div class="allow"></div> <br /> <br /> <br /> <i id="L2SW11" class="icono-mail"></i> <i id="L2SW12" class="icono-share"></i> <i id="L2SW13" class="icono-barChart"></i> <i id="L2SW14" class="icono-barChart"></i> <i id="L2SW15" class="icono-exclamation"></i> <i id="L2SW16" class="icono-home"></i> <i id="L2SW17" class="icono-mail"></i> <i id="L2SW18" class="icono-mail"></i> <i id="L2SW19" class="icono-mail"></i> <i id="L2SW1a" class="icono-mail"></i> <i id="L2SW1b" class="icono-mail">L2SW1b</i> </body> </html> |