Блог

Нажмите здесь для демонстрации — https://dojo.telerik.com/@rikinshah/EQiMupoG

У меня есть много элементов для навигации в заголовках и кнопок со значками в нижнем колонтитуле. все они используют svg > элементы path. Я хочу изменить цвет для всех элементов контура, кроме диаграммы Kendo, которая также содержит элементы контура.

В css я использую это, чтобы заставить все использовать один и тот же цвет :

 path {
    fill: #4b4c4c
}
  

но это также меняет цвет фона диаграммы Kendo.

Я попытался использовать:not selector для идентификатора div для заполнения пути для kendo, а также попытался

 chartArea: {
                background: "#4b4c4c",
            }, 
path: {
fill: "#4b4c4c"},
fill: {
color: "4b4c4c"}
  

ничто из этого не изменяет путь для svg-элемента в kendo graph.

 <div id="kendoChart" class="demo-section k-content wide" style="margin-left: -3px;">
<div id="chart"></div>
</div>


      function createChart() {
                $("#chart").kendoChart({
                    theme: "flat",
                    chartArea: {
                        background: "transparent",
                    },
                    legendItemClick: function (e) {
                        e.preventDefault();
                    },
                    seriesDefaults: {
                        type: "column",
                        width: 90,
                        gap: 1,
                    },
                    legend: {
                        position: "bottom",
                        spacing: 15,
                        labels: {
                            font: "12px sans-serif",
                            color: "#7F7F7F"
                        },
                    },
                    series: [{
                        data: [parseFloat(($('#room-revenue1').text()).replace(/,/g, "")),
                            parseFloat(($('#room-revenue2').text()).replace(/,/g, "")),
                            parseFloat(($('#room-revenue3').text()).replace(/,/g, "")),
                            parseFloat(($('#room-revenue4').text()).replace(/,/g, "")),
                            parseFloat(($('#room-revenue5').text()).replace(/,/g, "")),
                            parseFloat(($('#room-revenue6').text()).replace(/,/g, "")),
                            parseFloat(($('#room-revenue7').text()).replace(/,/g, "")), ],
                        name: "Room Revenue",
                        color: "#4472c3",
                        width: 500,
                        tooltip: {
                            visible: true,
                            template: "#= series.name #: #= kendo.format('{0:C2}',value) #",
                            font: "12px sans-serif",
                        },
                    }, {
                        type: "line",
                        data: [$('#rooms-sold1').text(),
                            $('#rooms-sold2').text(),
                            $('#rooms-sold3').text(),
                            $('#rooms-sold4').text(),
                            $('#rooms-sold5').text(),
                            $('#rooms-sold6').text(),
                            $('#rooms-sold7').text()],
                        name: "Room Sold",
                        color: "#12ccbe",
                        axis: "Rooms Sold",
                        width: 2,
                        markers: { visible: true },
                        tooltip: {
                            visible: true,
                            template: "#= series.name #: #= value #",
                            font: "12px sans-serif",
                        },
                    }],
                    render: function (e) {
                        var el = e.sender.element;
                        el.find("text:contains(Room Revenue)")
                            .parent()
                            .prev("path")
                            .attr("stroke-width", 3);
                        el.find("text:contains(Room Sold)")
                            .parent()
                            .prev("path")
                            .attr("stroke-width", 0);
                    },
                    valueAxes: [
                        {
                            visible: false,
                            majorGridLines: {
                                visible: true,
                                width: 0.5,
                                dashType: "solid",
                                color: "#ededed"
                            }
                        },
                        {
                            name: "Rooms Sold",
                            color: "#4e4141",
                            visible: false,
                            line: { visible: false },
                            majorGridLines: {
                                visible: false
                            },
                        }],
                    categoryAxis: {
                        categories: [($('#date1').text()).substring(0, 3),
                        ($('#date2').text()).substring(0, 3),
                        ($('#date3').text()).substring(0, 3),
                        ($('#date4').text()).substring(0, 3),
                        ($('#date5').text()).substring(0, 3),
                        ($('#date6').text()).substring(0, 3),
                        ($('#date7').text()).substring(0, 3)],
                        labels: {
                            font: "12px sans-serif",
                            color: "#7F7F7F"
                        },
                        majorGridLines: {
                            visible: false,
                        },
                    },
                });
            }

            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart(), 400);
  

Я хочу сохранить цвет фона диаграммы kendo / цвет заливки контура без изменений.