Posted By

jatkins on 08/22/15


Tagged

line circle graphics rectangle rect svg


Versions (?)

Make rectangle, line, circle svg elements


 / Published in: JavaScript
 

Released into the public domain, 2015

  1. function $(id) { return document.getElementById(id); }
  2.  
  3. var makePolyline = function() {
  4. var argObj = arguments[0],
  5. polyline = $(argObj.id) || document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
  6.  
  7. if(!polyline.id) {
  8. polyline.id = argObj.id;
  9. }
  10.  
  11. polyline.setAttributeNS(null, 'style', 'stroke: ' + (argObj.color || '#000000') + '; stroke-width: 1; fill: transparent');
  12. polyline.setAttributeNS(null, 'points', argObj.points.map(function(point) { return point.x + ',' + point.y; }).join(' '));
  13.  
  14. return polyline;
  15. };
  16.  
  17. var makeBox = function() {
  18. var argObj = arguments[0],
  19. box = $(argObj.id) || document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  20.  
  21. if(!box.id) {
  22. box.id = argObj.id;
  23. }
  24.  
  25. box.setAttributeNS(null, 'x', argObj.x);
  26. box.setAttributeNS(null, 'y', argObj.y);
  27. box.setAttributeNS(null, 'width', argObj.width);
  28. box.setAttributeNS(null, 'height', argObj.height);
  29. box.setAttributeNS(null, 'style', 'fill: transparent; stroke: ' + (argObj.color || '#000000') + '; stroke-width: 1');
  30.  
  31. return box;
  32. }, makeLine = function() {
  33. var argObj = arguments[0],
  34. line = $(argObj.id) || document.createElementNS('http://www.w3.org/2000/svg', 'line');
  35.  
  36. if(!line.id) {
  37. line.setAttributeNS(null, 'id', argObj.id);
  38. }
  39.  
  40. line.setAttributeNS(null, 'x1', argObj.from.x);
  41. line.setAttributeNS(null, 'y1', argObj.from.y);
  42. line.setAttributeNS(null, 'x2', argObj.to.x);
  43. line.setAttributeNS(null, 'y2', argObj.to.y);
  44. line.setAttributeNS(null, 'style', 'stroke: ' + (argObj.color || '#000000') + '; stroke-width: 1');
  45.  
  46. return line;
  47. }, makeCircle = function() {
  48. var argObj = arguments[0],
  49. circle = $(argObj.id) || document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  50.  
  51. if(argObj.id) {
  52. circle.setAttributeNS(null, 'id', argObj.id);
  53. }
  54. circle.setAttributeNS(null, 'cx', argObj.x);
  55. circle.setAttributeNS(null, 'cy', argObj.y);
  56. circle.setAttributeNS(null, 'r', argObj.radius || 1);
  57. circle.setAttributeNS(null, 'style', 'fill: ' + (argObj.color || '#000000') + '; stroke: transparent');
  58.  
  59. return circle;
  60. };

Report this snippet  

You need to login to post a comment.