title: Recently getting Error: Invalid value for <path> attribute d=
body: <p>We have had an interactive site plan for one of our clients working for a couple years now which can be seen <a href="http://www.southportoncapecod.com/site-plan/" rel="nofollow">here</a>. </p>
  
  <p>As of the past couple days, it is all of a sudden firing the error Error:</p>
  
  <pre><code>Invalid value for &lt;path&gt; attribute d="L194,814L193,803L201,803L202,813Z" 
  </code></pre>
  
  <p>with multiple errors since it uses raphael.js to draw each unit with plot points from Wordpress. I for the life of me can't figure out why this all of a sudden stopped working and is causing this error and not drawing the units and how to fix it. If anyone could shine some light on this it would be greatly appreciated. Code below.</p>
  
  <pre><code>&lt;script&gt;
  var ie = (function(){
  
      var undef,
          v = 3,
          div = document.createElement('div'),
          all = div.getElementsByTagName('i');
  
      while (
          div.innerHTML = '&lt;!--[if gt IE ' + (++v) + ']&gt;&lt;i&gt;&lt;/i&gt;&lt;![endif]--&gt;',
          all[0]
      );
  
      return v &gt; 4 ? v : undef;
  
  }());
      var plots = [];
      var points = [];
      var ISIE = /*@cc_on!@*/0;
      var is9 = navigator.appVersion.indexOf("MSIE 9.0")==-1 ? true : false;
      window.curHouseModel = '';
      &lt;?php
          $a = array(
              'post_type' =&gt; 'plot',
              'orderby'   =&gt;  'date',
              'order' =&gt;  'asc',
              'posts_per_page' =&gt; -1
          );
          $q = new WP_Query($a);
          $counter = 0;
          while($q-&gt;have_posts()):
              $q-&gt;the_post();
              ?&gt;
              &lt;?php
                  $fn = $post-&gt;post_title;
                  $name = str_replace('-', '_', $post-&gt;post_name);
                  $num = strtok($fn, ' ');
                  $availibility = types_render_field('plot-av', array('raw' =&gt; "true"));
                  $points = explode('!!!', types_render_field('plot-path-points', array('show_name' =&gt; "false", 'separator' =&gt; '!!!'), null));
                  $model = types_render_field('plot-type', array('raw' =&gt; "true"));
                  $plotP = explode(',', types_render_field('plot-co', array('show_name' =&gt; "false"), null));
                  $plotX = $plotP[0];
                  $plotY = $plotP[1];
              ?&gt;
              points[&lt;?= $counter ?&gt;] = [];
              plots[&lt;?php echo $counter; ?&gt;] = [];
              plots[&lt;?php echo $counter; ?&gt;]['name'] = '&lt;?php echo $name ?&gt;';
              plots[&lt;?php echo $counter; ?&gt;]['fn'] = '&lt;?php echo $fn ?&gt;';
              plots[&lt;?php echo $counter; ?&gt;]['num'] = '&lt;?php echo $num ?&gt;';
              plots[&lt;?php echo $counter; ?&gt;]['pX'] = '&lt;?php echo $plotX ?&gt;';
              plots[&lt;?php echo $counter; ?&gt;]['pY'] = '&lt;?php echo $plotY ?&gt;';              
              //if(Function('/*@cc_on return document.documentMode===9@*/')()){ 
              //if (window.ie == 9) { 
              //  console.log('ie9');
              //  plots[&lt;?php echo $counter; ?&gt;]['pY'] = plots[&lt;?php echo $counter; ?&gt;]['pY'] / 2;
              //}
              //if(Function('/*@cc_on return document.documentMode===10@*/')()){ 
              //  console.log('ie10'); 
              //  plots[&lt;?php echo $counter; ?&gt;]['pY'] = plots[&lt;?php echo $counter; ?&gt;]['pY'] / 2;
              //}
              if(document.documentMode &gt;= 9){ 
              //  console.log('ie10'); 
                  plots[&lt;?php echo $counter; ?&gt;]['pY'] = plots[&lt;?php echo $counter; ?&gt;]['pY'] / 2;
              }
              plots[&lt;?php echo $counter; ?&gt;]['availability'] = '&lt;?php echo $availibility ?&gt;';
  
              plots[&lt;?php echo $counter; ?&gt;]['points'] = &lt;?php echo json_encode($points) ?&gt;;
              &lt;?php foreach($points as $i =&gt; $plot) { ?&gt;
              plots[&lt;?php echo $counter; ?&gt;][&lt;?= $i ?&gt;] = '&lt;?php echo $name; echo $i; ?&gt;'
              &lt;?php } ?&gt;
              plots[&lt;?php echo $counter; ?&gt;]['model'] = '&lt;?php echo $model ?&gt;';
      &lt;?php $counter ++; endwhile; wp_reset_query();?&gt;
      window.spTooltip = '';
      window.spTooltopMore = '';
      window.onload = function() {
          var paper = Raphael('raphael-canvas', 1656, 1140);
  
          var plotLength = plots.length,
              curPlot = null;
          //  console.log(plotLength);
          for(var i = 0; i &lt; plotLength; i++) {
              curPlot = plots[i];
               var curPlotPoints = curPlot['points'],
                   curPlotPointsLength = curPlotPoints.length,
                   indPlot = null,
                   plotAv = null;
  
              switch(curPlot['availability']) {
                  case 'available':
                      plotAv = '#fff';
                      plotText = "&lt;?= of_get_option('sp_available'); ?&gt;";
                      break;                  
                  case 'sold':
                      plotAv = '#ce0000';
                      plotText = "&lt;?= of_get_option('sp_sold'); ?&gt;";
  
                      break;
                  case 'reserved':
                      plotAv = '#ce0000';
                      plotText = "&lt;?= of_get_option('sp_reserved'); ?&gt;";
  
                      break;
                  case 'future':
                      plotAv = '#9E816D';
                      plotText = "&lt;?= of_get_option('sp_release'); ?&gt;";
  
                      break;
                  case 'new':
                      plotAv = '#71b8ec';
                      plotText = "&lt;?= of_get_option('sp_new'); ?&gt;";
  
                      break;
                  case 'options':
                      plotAv = '#fff';
                      plotText = "&lt;?= of_get_option('sp_options'); ?&gt;";
  
                      break;
              }
  
               for(var j = 0; j &lt; curPlotPointsLength; j++) {
                  indPlot = curPlotPoints[j];
                  var convPlot = indPlot.replace(/([0-9.]+),([0-9.]+)/g, function($0, x, y) {
                          return 'L ' + Math.floor(x) + ',' + Math.floor(y) + ' ';
                      }).replace(/^L/, 'M'); // replace first L with M (moveTo)
                  paper.path(convPlot + ' Z').attr({
                      fill: plotAv,
                      stroke: '#111111',
                      'stroke-width': '2',
                      'stroke-linecap': 'round',
                      'stroke-linejoin': 'round',
                      'stroke-miterlimit': '10'
                  }).data({
                      'model': curPlot['model'],
                      'title': curPlot['fn'],
                      'status': curPlot['availability'],
                      'text': plotText,
                      'color': (plotAv == '#ce0000') ? 'color:#ce0000;' : ''
                  }).hover(function() {
                      if(Modernizr.touch) {
                          if(this.data('status') == 'available') {
                              window.curHouseModel = this.data('title');
                              window.location.hash = this.data('model');
                          }
                      } else {
                          window.spTooltip = this.data('title') + '&lt;i style="'+this.data('color')+'"&gt;' + this.data('text') + '&lt;/i&gt;';
                          if(this.data('status') == 'available') {
  
                              $('body').css('cursor', 'pointer');
                          }
                      }
                  }, function() {
                      window.spTooltip = '';
                      if(this.data('status') == 'available') {
                          $('body').css('cursor', 'default');
                      }
  
                  }).click(function() {
                      var sdf = curPlot;
                  //  console.log(sdf);
                  //  console.log(curPlot);
                      if(this.data('status') == 'available') {
                          window.curHouseModel = this.data('title');
                          window.location.hash = this.data('model');
                      }
                  });
               }
               paper.text(curPlot['pX'], curPlot['pY'], curPlot['num']).attr({
                  'font-size': '12px',
                  'font-weight': 'bold'
               }).data({
                      'model': curPlot['model'],
                      'title': curPlot['fn'],
                      'status': curPlot['availability'],
                      'text': plotText,
                      'color': (plotAv == '#ce0000') ? 'color:#ce0000;' : ''
                  }).hover(function() {
                      window.spTooltip = this.data('title') + '&lt;i style="'+this.data('color')+'"&gt;' + this.data('text') + '&lt;/i&gt;';
                      if(this.data('status') == 'available') {
                          $('body').css('cursor', 'pointer');
                      }
                  }, function() {
                      window.spTooltip = '';
                      if(this.data('status') == 'available') {
                          $('body').css('cursor', 'default');
                      }
  
                  }).click(function() {
                      var sdf = curPlot;
                  //  console.log(sdf);
                  //  console.log(curPlot);
                      if(this.data('status') == 'available') {
                          window.curHouseModel = this.data('title');
                          window.location.hash = this.data('model');
                      }
                  });
  
          }
          window.tt = $('.site-plan-tooltip');
          $(document).on('mousemove', function(e){
          //  console.log(e);
              if(window.spTooltip !== '') {
              //  console.log(window.spTooltip);
                  var o = {};
                  o.x = e.pageX - $('.modal-site-plan').offset().left + $('.modal-site-plan').scrollLeft(),
                  o.y = e.pageY - $('.modal-site-plan').offset().top + $('.modal-site-plan').scrollTop(),
                  o.w = $('.modal-inner-sp').width(),
                  o.z = $('.modal-inner-sp').height();
                  window.tt.show();
                  if(o.x &lt; (o.w / 2)) {
                      window.tt.css({
                          'right': 'auto',
                          "left": o.x+30,
                          "top": o.y+30
                      });
                  } else {
                      window.tt.css({
                          "right": (o.w - o.x + 30),
                          'left': 'auto',
                          "top": o.y+10
                      });
                  }
                  if(o.y &lt; (o.z / 2)) {
                      window.tt.css({
                          "top": o.y+30
                      });
                  } else {
                      window.tt.css({
                          "top": o.y-90
                      });
                  }
                  window.tt.html(window.spTooltip);
              } else {
                  window.tt.hide();
              }
          });
          function addTip(node, txt){
          //  console.log(node);
          }
      };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Solution I came up with:</p>
  
  <pre><code>var convPlot = indPlot.replace(/([0-9.]+),([0-9.]+)/g, function($0, x, y) {                           
                              return 'L ' + Math.floor(x) + ',' + Math.floor(y) + ' ';
                      });
                      var newConv = convPlot.replace('L','M'); // testing replace first L with M (moveTo)
                  paper.path(newConv + ' Z').attr({ 
  </code></pre>