Quiero colocar algunas imágenes SVG antes de algunos elementos seleccionados. Estoy usando jQuery pero eso es irrelevante.
Me gustaría tener el :beforeelemento para ser como:
#mydiv:before {
content: '<svg.. code here</svg>';
display: block;
width: 22px;
height: 10px;
margin: 10px 5px 0 10px;
}Si lo hago como se muestra arriba, solo muestra la cadena. Revisé las especificaciones y parece haber algunas restricciones sobre el contenido que puede ser. ¿Hay alguna solución a esta restricción? Solo el contenido css es relevante para mi pregunta.
Respuestas:
¡Sí tu puedes! Acabo de probar esto y funciona muy bien, ¡esto es increíble! Todavía no funciona con html, pero sí con svg.
En mi index.html tengo:
Y mi test.svg se ve así:
fuente
content: url(path/to/my.svg). Sin embargo, eso no necesariamente significa que funcionaría con la biblioteca de información sobre herramientas de jQuery UI.content: url(mysprite.svg#my-icon)realidad no levantará su ícono. sin embargo, me encantaría que me demuestren lo contrario :)Si. Puede agregar el SVG como imagen de fondo de un vacío: después o: antes. Aqui tienes:
fuente
background-sizeno es compatible con Opera Mini. Esto es muy frustrante.<?xml version="1.0" encoding="utf-8"?>al comienzo de mi archivo svg para que funcione.asegúrese de que su svg no contenga comillas dobles, y uriencode cualquier # símbolos
fuente
url('file.svg')funciona sin embargo.xmlns='http://www.w3.org/2000/svg'en la parte <svg> para trabajar en Chrome 66.x. Por ejemplo, el pequeño galón será:content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");El uso de sprites CSS y uri de datos brinda beneficios adicionales interesantes como carga rápida y menos solicitudes Y obtenemos soporte para IE8 usando image / base64:
Codepen muestra usando SVG
HTML
CSS
Para IE8, cambie a esto:
fuente
scale svgy encontrará muchas más formasHerramienta conveniente para codificar SVG codificador de url
fuente
Tenga cuidado, todas las otras respuestas tienen algún problema en IE.
Tengamos esta situación: botón con el icono antepuesto. Todos los navegadores manejan esto correctamente, pero IE toma el ancho del elemento y escala el contenido anterior para ajustarlo. JSFiddle
La solución es establecer el tamaño al elemento anterior y dejarlo donde está:
Las soluciones
background-image+ tambiénbackground-sizefuncionan, pero son poco convencionales, ya que debe especificar los mismos tamaños dos veces.El resultado en IE11:
fuente
Para ampliar aún más este tema. En caso de que desee agregar íconos de Font Awesome 5 , debe agregar un poco de CSS adicional.
Los iconos por defecto tienen clases
svg-inline--fayfa-w-*.También hay clases modificadoras como
fa-lg,fa-rotate-*y otras. Debe verificar elsvg-with-js.cssarchivo y encontrar el CSS adecuado para eso.Debe agregar su propio color al icono css; de lo contrario, será negro de forma predeterminada, por ejemplo,
fill='%23f00'dónde%23está codificado#.fuente
fuente