Post
Ask Question
Sana Khan

Sana Khan

  • NA
  • 27
  • 5k

On click automatically draw rectangle on the SVG Map

Dec 12 2018 1:46 AM
I tried an example of drawing circle in SVG map but i want to draw rectangle and i am unable to do it. My task is to select one of the rectangle of particular shape from left panel and goto map and then click wherever i want. On cursor click rectangle should be created. There are different size of rectangle on left panel of my website like 3x3, 3x6, 6x6 etc.
below is the example
  1. <html>    
  2. <head>    
  3. <style>    
  4. *, *:before, *:after {    
  5.   box-sizing: border-box;    
  6.   padding: 0;    
  7.   margin: 0;    
  8. }    
  9.     
  10. html {    
  11.   height: 100%;    
  12. }    
  13.     
  14. body {    
  15.   min-height: 100%;    
  16.   font-family: Lato, sans-serif;    
  17.   font-size: 100%;    
  18.   padding: 0;    
  19.   margin: 10px;    
  20.   color: #444;    
  21.   background-color: #fff;    
  22.   overflow: hidden;    
  23. }    
  24.     
  25. svg {    
  26.   background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);    
  27. }    
  28.     
  29. rect {    
  30.   fill: #006da1;    
  31. }    
  32.     
  33. circle {    
  34.   stroke-width: 5;    
  35.   stroke: #f00;    
  36.   fill: #ff0;    
  37. }    
  38.     
  39. p {    
  40.   position: absolute;    
  41.   right: 5px;    
  42.   bottom: 5px;    
  43.   padding: 3px 6px;    
  44.   background-color: rgba(255,255,255,0.8);    
  45. }    
  46. </style>    
  47. </head>    
  48. <body>    
  49.   <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet">    
  50.       
  51.   <g id="local" transform="scale(4)">    
  52.     <rect x="50" y="50" width="100" height="100" />    
  53.   </g>    
  54.     
  55. </svg>    
  56.     
  57. <script>    
  58. var    
  59.   svg = document.getElementById('mysvg'),    
  60.   NS = svg.getAttribute('xmlns'),    
  61.   local = svg.getElementById('local'),    
  62.   coords = document.getElementById('coords');    
  63.     
  64. // add a circle to the SVG    
  65. svg.addEventListener('click', function(e) {    
  66.       
  67.   var    
  68.     t = e.target,    
  69.     x = e.clientX,    
  70.     y = e.clientY,    
  71.     target = (t == svg ? svg : t.parentNode),    
  72.     svgP = svgPoint(target, x, y),    
  73.     circle = document.createElementNS(NS, 'circle');    
  74.       
  75.   circle.setAttributeNS(null, 'cx', Math.round(svgP.x));    
  76.   circle.setAttributeNS(null, 'cy', Math.round(svgP.y));    
  77.   circle.setAttributeNS(null, 'r', 10);    
  78.   target.appendChild(circle);    
  79.       
  80. }, false);    
  81.     
  82. // translate page to SVG co-ordinate    
  83. function svgPoint(element, x, y) {    
  84.       
  85.   var pt = svg.createSVGPoint();    
  86.   pt.x = x;    
  87.   pt.y = y;    
  88.   return pt.matrixTransform(element.getScreenCTM().inverse());    
  89.       
  90. }    
  91.     
  92. </script>    
  93. </body>    
  94. </html>

Answers (1)