Question

基本上我创建了一个动画svg donutchart，它实际上非常流畅，但我在IE11中收到错误。

无法获得属性＆＃39; mouseover＆＃39;未定义或空引用

这是标记

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript">// <![CDATA[

 var chart = Raphael('chart', 320, 320, 0, 0);

var slice1 = chart.set();
slice1.push(chart.path("M158.7,109.2v-98c-53.9,0-99.9,26.7-126.8,73.5l84.4,48.9   C124.8,119.1,140.6,109.2,158.7,109.2z").attr({
    parent: 'slice1',
    'stroke-width': '0'
}));
slice1.attr({
    fill: '#003366',
    id: 'slice1',
    name: 'slice1'
});
var slice2 = chart.set();
slice2.push(chart.path("M109.1,160c0-9,2.4-17.3,6.6-24.6L31.3,86.5c-26.9,46.8-26.9,100.2,0,147l84.4-48.9   C111.5,177.3,109.1,169,109.1,160z").attr({
    parent: 'slice2',
    'stroke-width': '0'
}));
slice2.attr({
    fill: '#003366',
    id: 'slice2',
    name: 'slice2'
});

var slice3 = chart.set();
slice3.push(chart.path("M116.3,186.3l-84.4,48.9c26.9,46.8,72.9,73.5,126.8,73.5v-98   C140.6,210.8,124.8,200.9,116.3,186.3z").attr({
    parent: 'slice3',
    'stroke-width': '0'
}));
slice3.attr({
    fill: '#003366',
    id: 'slice3',
    name: 'slice3'
});

var slice4 = chart.set();
slice4.push(chart.path("M161.3,210.8v98c53.9,0,99.9-26.7,126.8-73.5l-84.4-48.9   C195.2,200.9,179.4,210.8,161.3,210.8z").attr({
    parent: 'slice4',
    'stroke-width': '0'
}));
slice4.attr({
    fill: '#003366',
    id: 'slice4',
    name: 'slice4'
});

var slice5 = chart.set();
slice5.push(chart.path("M288.7,86.5l-84.4,48.9c4.2,7.2,6.6,15.6,6.6,24.6s-2.4,17.3-6.6,24.6l84.4,48.9   C315.7,186.7,315.7,133.3,288.7,86.5z").attr({
    parent: 'cosmetology',
    'stroke-width': '0'
}));
slice5.attr({
    fill: '#003366',
    id: 'slice5',
    name: 'slice5'
});

var slice6 = chart.set();
slice6.push(chart.path("M203.7,133.7l84.4-48.9c-26.9-46.8-72.9-73.5-126.8-73.5v98   C179.4,109.2,195.2,119.1,203.7,133.7z").attr({
    parent: 'clinicalchemistry',
    'stroke-width': '0'
}));
slice6.attr({
    fill: '#003366',
    id: 'slice6',
    name: 'slice6'
});


var chartGroups = [slice1, slice2, slice3, slice4, slice5, slice6];

for (var i = 0, len = chartGroups.length; i <= len; i++) {

    var el = chartGroups[i];

    el.mouseover(function() {
        this.toFront();
        this.attr({
            cursor: 'pointer',
            fill: '#42bcec',
            stroke: '#fff',
            'stroke-width': '2'
        });
        this.animate({
            scale: '1.2'  
        }, 200);
    });
    el.mouseout(function() {
        this.animate({
            scale: '1.05'
        }, 200);
        this.attr({
            fill: '#003366'
        });
    });
    el.click(function() {
        this.animate({
            fill: '#ff55ff'
        }, 200);
    });

}   


    // ]]></script>

  </body>
</html>

或者查看完整代码jsfiddle

无法获得属性＆＃39; mouseover＆＃39;未定义或空引用

0 个答案: