我们为一位工作了几年的客户制定了互动网站计划，可以看到here。
截至过去几天，它突然发出错误错误：
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({
答案 0 :(得分：2)
路径中的第一个字符必须是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)
没有做评论说应该做的事情。