最近收到错误：<path> 属性 d= 的值无效

Question

我们已经为我们工作了几年的一位客户制定了一个交互式站点计划，可以看到 here。

最近几天，突然报错Error:

Invalid value for <path> attribute d="L194,814L193,803L201,803L202,813Z" 

有多个错误，因为它使用 raphael.js 使用 Wordpress 中的绘图点绘制每个单元。我一生都无法弄清楚为什么这突然停止工作并导致此错误并且没有绘制单位以及如何修复它。如果有人能对此有所了解，将不胜感激。代码如下。

<script>
var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 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 = '';
    <?php
        $a = array(
            'post_type' => 'plot',
            'orderby'   =>  'date',
            'order' =>  'asc',
            'posts_per_page' => -1
        );
        $q = new WP_Query($a);
        $counter = 0;
        while($q->have_posts()):
            $q->the_post();
            ?>
            <?php
                $fn = $post->post_title;
                $name = str_replace('-', '_', $post->post_name);
                $num = strtok($fn, ' ');
                $availibility = types_render_field('plot-av', array('raw' => "true"));
                $points = explode('!!!', types_render_field('plot-path-points', array('show_name' => "false", 'separator' => '!!!'), null));
                $model = types_render_field('plot-type', array('raw' => "true"));
                $plotP = explode(',', types_render_field('plot-co', array('show_name' => "false"), null));
                $plotX = $plotP[0];
                $plotY = $plotP[1];
            ?>
            points[<?= $counter ?>] = [];
            plots[<?php echo $counter; ?>] = [];
            plots[<?php echo $counter; ?>]['name'] = '<?php echo $name ?>';
            plots[<?php echo $counter; ?>]['fn'] = '<?php echo $fn ?>';
            plots[<?php echo $counter; ?>]['num'] = '<?php echo $num ?>';
            plots[<?php echo $counter; ?>]['pX'] = '<?php echo $plotX ?>';
            plots[<?php echo $counter; ?>]['pY'] = '<?php echo $plotY ?>';              
            //if(Function('/*@cc_on return document.documentMode===9@*/')()){ 
            //if (window.ie == 9) { 
            //  console.log('ie9');
            //  plots[<?php echo $counter; ?>]['pY'] = plots[<?php echo $counter; ?>]['pY'] / 2;
            //}
            //if(Function('/*@cc_on return document.documentMode===10@*/')()){ 
            //  console.log('ie10'); 
            //  plots[<?php echo $counter; ?>]['pY'] = plots[<?php echo $counter; ?>]['pY'] / 2;
            //}
            if(document.documentMode >= 9){ 
            //  console.log('ie10'); 
                plots[<?php echo $counter; ?>]['pY'] = plots[<?php echo $counter; ?>]['pY'] / 2;
            }
            plots[<?php echo $counter; ?>]['availability'] = '<?php echo $availibility ?>';

            plots[<?php echo $counter; ?>]['points'] = <?php echo json_encode($points) ?>;
            <?php foreach($points as $i => $plot) { ?>
            plots[<?php echo $counter; ?>][<?= $i ?>] = '<?php echo $name; echo $i; ?>'
            <?php } ?>
            plots[<?php echo $counter; ?>]['model'] = '<?php echo $model ?>';
    <?php $counter ++; endwhile; wp_reset_query();?>
    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 < plotLength; i++) {
            curPlot = plots[i];
             var curPlotPoints = curPlot['points'],
                 curPlotPointsLength = curPlotPoints.length,
                 indPlot = null,
                 plotAv = null;

            switch(curPlot['availability']) {
                case 'available':
                    plotAv = '#fff';
                    plotText = "<?= of_get_option('sp_available'); ?>";
                    break;                  
                case 'sold':
                    plotAv = '#ce0000';
                    plotText = "<?= of_get_option('sp_sold'); ?>";

                    break;
                case 'reserved':
                    plotAv = '#ce0000';
                    plotText = "<?= of_get_option('sp_reserved'); ?>";

                    break;
                case 'future':
                    plotAv = '#9E816D';
                    plotText = "<?= of_get_option('sp_release'); ?>";

                    break;
                case 'new':
                    plotAv = '#71b8ec';
                    plotText = "<?= of_get_option('sp_new'); ?>";

                    break;
                case 'options':
                    plotAv = '#fff';
                    plotText = "<?= of_get_option('sp_options'); ?>";

                    break;
            }

             for(var j = 0; j < 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') + '<i style="'+this.data('color')+'">' + this.data('text') + '</i>';
                        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') + '<i style="'+this.data('color')+'">' + this.data('text') + '</i>';
                    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 < (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 < (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);
        }
    };

</script>

我想出的解决方案：

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({ 

Answer 1

路径中的第一个字符必须是 M 或 m，因此该路径确实无效。我想你一定改变了你的软件中的某些东西。

我想你需要弄清楚为什么这行：

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)

没有按照评论所说的去做。