Primeira pergunta sobre o stackoverflow, espero que não seja muito complicado. Eu tenho tentado descobrir uma maneira de exibir um calendário com dias de eventos divididos. O que eu criei foi usar um gráfico SVG colocado com CSS embutido como pano de fundo para a célula da tabela de calendário específica, a fim de dividir os dias com uma divisão. Funciona maravilhosamente no Firefox e Chrome, mas os gráficos não são exibidos no Internet Explorer (tentei 9 e 10, mas não 11).

O calendário é gerado pela primeira vez com javascript e os eventos são colocados adicionando classes css às células de destino a partir dos dados JSON.

Aqui está um pequeno trecho das classes CSS a serem usadas para aplicar o plano de fundo, exemplo completo com o HTML no violino:

    .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>");}

Aqui está o violino que contém o HTML e CSS que ilustra o problema:

A execução do violino no Firefox e no Chrome mostra os dias separados corretamente, mas o Internet Explorer 9, 10, (11?) Não exibe os dias separados.

Analisei perguntas semelhantes, como as seguintes, mas ainda não encontrei soluções claras:

Alguém tem alguma experiência em fazer com que o Internet Explorer exiba SVG embutido como plano de fundo ou veja algo óbvio que estou ignorando ou talvez esteja abordando isso da maneira errada. Obrigado!