Первый вопрос по stackoverflow, надеюсь, что он не слишком тупой. Я пытался найти способ отображения календаря с разделенными днями событий. Я придумал, как использовать SVG-графику с встроенным CSS в качестве фона для определенной ячейки таблицы календаря, чтобы разделить дни, которые имеют разделение. Он прекрасно работает в Firefox и Chrome, но графика не отображается в Internet Explorer (я пробовал 9 и 10, но не 11).

Календарь сначала создается с использованием JavaScript, а события размещаются путем добавления классов CSS в целевые ячейки из данных JSON.

Вот небольшой фрагмент CSS-классов, используемых для применения фона, полный пример с HTML в скрипте:

    .calendar td {
      position:relative;
    }

    .calendar .split {
        background-repeat:no-repeat;
        background-position: top left;
        background-size: 100% 100%;
    }
    .calendar .split.am_vaca{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'  preserveAspectRatio='none'><polygon points='0,0 1,0 0,1' style='stroke-width:0; fill:lightgreen;' /></svg>");}

Вот скрипка, содержащая HTML и CSS, которая иллюстрирует проблему:

Запуск скрипта в Firefox и Chrome правильно показывает разделенные дни, но Internet Explorer 9, 10, (11?) Не отображает разделенные дни.

Я рассмотрел похожие вопросы, такие как следующие, но пока не нашел четких решений:

Любой имеет опыт работы с Internet Explorer для отображения встроенного SVG в качестве фона или увидеть что-то очевидное, я пропускаю или, возможно, я подхожу к этому неправильно. Спасибо!