charts - Kendo Chart 控件不会在 IE 10 中呈现正确的 SVG

Question

我正在测试使用 Kendo UI Pro 套件创建 SPA。我目前在使用 Kendo UI Chart(在 Donut 模式下)时遇到问题。图表的 SVG 无法在 IE 10 中正确呈现。此问题在 IE 11 或 Firefox 中似乎不会发生。

JSFiddle 示例:http://jsfiddle.net/m9vq7gu4/

在 View 的 Show 事件中，我调用 ajax API 并获取数据:

$.ajax({
    url: '/echo/json/',
    data: {
        json: JSON.stringify({
            "TotalHours": Math.random() * 714,
                "Budget": 714.6
        }),
        delay: 2
    },
    type: 'POST',
    success: function (response) {
        console.log(response);
        var data = [{
            value: response.TotalHours,
            color: "red"
        }, {
            value: response.Budget - response.TotalHours,
            color: "transparent"
        }];
        loadRadial(id, data);
    }
});

然后我 kendoChart div 并刷新它。

var dsRadial = new kendo.data.DataSource({
    data: data
});
dsRadial.read();
var radial = $("#" + id).kendoChart({
    dataSource: dsRadial,
    dataBound: function () {
        console.log("dataBound");
    },
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "donut",
        holeSize: 60,
        size: 20
    },
    series: [{
        field: "value",
        colorField: "color"
    }],
    chartArea: {
        background: "transparent"
    },
    tooltip: {
        visible: true
    }
}).data("kendoChart");

我展示了 View/Layout/Router 下的所有事件都正确触发。起初我认为图表没有正确绑定(bind)，但如果我查看页面的源代码，SVG 就被创建了:

<svg xmlns="http://www.w3.org/2000/svg" style="left: 0px; top: -0.47px; width: 100%; height: 100%; overflow: hidden;" version="1.1"><defs><radialGradient id="5c7e3a1b-06a7-4665-bb46-44db26b308e7" gradientUnits="userSpaceOnUse" cx="409.5" cy="100" r="80"><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0;" offset="0.75" /><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0.3;" offset="0.875" /><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0;" offset="0.9975" /></radialGradient></defs><g><path fill="none" stroke="none" d="M 0 0 L 819 0 L 819 200 L 0 200 Z" /><path fill="none" stroke="none" d="M 5 5 L 814 5 L 814 195 L 5 195 Z" /><g><g /></g><g><g><g transform="matrix(1 0 0 1 0 0)"><path fill="red" stroke="none" d="M 409.5 20 C 428.398 20 447.219 26.963 461.567 39.263 C 475.915 51.563 485.673 69.099 488.56 87.775 C 491.448 106.452 487.443 126.115 477.48 142.174 C 467.517 158.233 451.679 170.556 433.663 176.264 L 427.622 157.198 C 441.134 152.917 453.013 143.675 460.485 131.631 C 467.957 119.587 470.961 104.839 468.795 90.831 C 466.629 76.824 459.311 63.672 448.55 54.447 C 437.789 45.222 423.674 40 409.5 40 Z" /><path fill="url(#5c7e3a1b-06a7-4665-bb46-44db26b308e7)" stroke="none" d="M 409.5 20 C 428.398 20 447.219 26.963 461.567 39.263 C 475.915 51.563 485.673 69.099 488.56 87.775 C 491.448 106.452 487.443 126.115 477.48 142.174 C 467.517 158.233 451.679 170.556 433.663 176.264 L 427.622 157.198 C 441.134 152.917 453.013 143.675 460.485 131.631 C 467.957 119.587 470.961 104.839 468.795 90.831 C 466.629 76.824 459.311 63.672 448.55 54.447 C 437.789 45.222 423.674 40 409.5 40 Z" /></g><g transform="matrix(1 0 0 1 0 0)"><path fill="none" stroke="none" d="M 433.663 176.264 C 416.13 181.819 396.674 181.079 379.614 174.208 C 362.554 167.337 348.016 154.387 339.227 138.231 C 330.437 122.076 327.462 102.835 330.961 84.779 C 334.461 66.723 344.408 49.987 358.597 38.284 C 372.785 26.582 391.108 20 409.5 20 L 409.5 40 C 395.706 40 381.964 44.936 371.322 53.713 C 360.681 62.49 353.22 75.043 350.596 88.584 C 347.972 102.126 350.203 116.557 356.795 128.674 C 363.387 140.79 374.291 150.503 387.086 155.656 C 399.881 160.809 414.473 161.364 427.622 157.198 Z" /><path fill="url(#5c7e3a1b-06a7-4665-bb46-44db26b308e7)" stroke="none" d="M 433.663 176.264 C 416.13 181.819 396.674 181.079 379.614 174.208 C 362.554 167.337 348.016 154.387 339.227 138.231 C 330.437 122.076 327.462 102.835 330.961 84.779 C 334.461 66.723 344.408 49.987 358.597 38.284 C 372.785 26.582 391.108 20 409.5 20 L 409.5 40 C 395.706 40 381.964 44.936 371.322 53.713 C 360.681 62.49 353.22 75.043 350.596 88.584 C 347.972 102.126 350.203 116.557 356.795 128.674 C 363.387 140.79 374.291 150.503 387.086 155.656 C 399.881 160.809 414.473 161.364 427.622 157.198 Z" /></g></g></g></g></svg>

真正奇怪的是，一旦我将路由器切换到另一个页面，SVG 就会正确显示，直到数据再次更改(您可以通过单击演示中的主页/数据链接来查看)。除了图表和 View /布局/路由器之间的奇怪问题之外，还有什么可能导致这种情况？

Answer 1

这是版本 2013.2.1215(内部版本)之前的 Kendo UI 的一个已知问题。

这是由 IE10 SVG 实现中的故障引起的。一旦路径缩放为 0，即使清除了转换，它也会消失。