SVG en línea CSS no se muestra en Internet Explorer

Primera pregunta sobre stackoverflow, espero que no sea demasiado tonto. He estado tratando de encontrar una manera de mostrar un calendario con días de eventos divididos. Lo que se me ocurrió fue usar un gráfico SVG colocado con css en línea como fondo para la celda de la tabla del calendario específico para dividir los días que tienen una división. Funciona maravillosamente en Firefox y Chrome, pero los gráficos no se muestran en Internet explorer (probé con 9 y 10 pero no con 11).

El calendario se genera primero con javascript y los eventos se colocan agregando clases css a celdas seleccionadas a partir de datos JSON.

Aquí hay un pequeño recorte de las clases de CSS que se utilizan para aplicar el fondo, ejemplo completo con el HTML en el violín:

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

Aquí está el violín que contiene el HTML y CSS que ilustra el problema:

  • http://jsfiddle.net/0mspvexg/2/

Ejecutar el violín en Firefox y chrome muestra los días divididos correctamente, pero Internet Explorer 9, 10, (¿11?) No muestra los días divididos.

He analizado preguntas similares, como las siguientes, pero aún no he encontrado ninguna solución clara:

  1. Imagen de fondo SVG en IE9
  2. Inline SVG no funciona como imagen de fondo en IE

Cualquiera que tenga experiencia en hacer que Internet Explorer muestre el SVG en línea como fondo o vea algo obvio que estoy pasando por alto o tal vez me estoy acercando a esto de manera incorrecta. ¡Gracias!

IE funciona si codificas en base64 los datos, por ejemplo

  .calendar .split.pm_mgmt{ background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8+PC9zdmc+");} 

Desafortunadamente, necesita usar la encoding URI (o base64) para Internet Explorer.

Con la encoding URI usted mantiene la posibilidad de cambiar los valores de SVG, pero es difícil de leer.

 .calendar .split.am_vaca { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%20%20preserveAspectRatio%3D'none'%3E%3Cpolygon%20points%3D'0%2C0%201%2C0%200%2C1'%20style%3D'stroke-width%3A0%3B%20fill%3Alightgreen%3B'%20%2F%3E%3C%2Fsvg%3E"); } 

Puede codificar su SVG aquí: http://pressbin.com/tools/urlencode_urldecode/ Y elija la opción encodeURIComponent ().

Si está utilizando Compass, puede automatizar la encoding base64: http://keegan.st/2012/09/14/easy-image-data-uris-with-compass/