Revista Informática

Incrustar un SVG dentro del HTML directamente

Publicado el 08 junio 2016 por Displaynone

Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.

Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:

.class {
  content: url('imagen.svg');
}

Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:

jQuery(document).ready(function() {
  var selectors = ['.class1', '.class2']
  for(var i in selectors) {
    var url = window.getComputedStyle(
    	document.querySelector(selectors[i]), ':before'
    ).getPropertyValue('content');
    url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
    var $img = jQuery('img');
    jQuery.get(url, function(data) {
      // Replace image with new SVG
      jQuery(selectors[i]).append(data.replace(/<\?xml[^>]+>/, ''));
      jQuery('').appendTo('head');
    }, 'text');
  }
});
0000000

También podría interesarte :

Volver a la Portada de Logo Paperblog

Quizás te interesen los siguientes artículos :

Revista