2

Es posible usar :before de CSS para agregar un contenido SVG a un elemento div, por ejemplo:

#midiv:before {
   content: "<svg>...</svg>"
}

En este ejemplo el contenido agregado al <div> podría ser cualquier figura generado mediante la correspondiente etiqueta <svg>, lo he intentado pero me muestra el contenido como texto no la figura respectiva.

4 respuestas 4

1

En realidad si que puede utilizar un svg dentro del atributo content de un elemento :before. Sin embargo, no lo podrás añadir directamente y tendrá que ser a través de una url.

Te dejo dos formas:

Añadiendo el svg como fichero externo

Puedes importar el svg con una url dentro de tu atributo content.

#midiv:before {
   content: url("fichero.svg");
}

donde fichero.svg sería el fichero en el que tuvieras contenido tu svg.

Añadiendo el svg como una URI

En el caso de que no quisieras utilizar un fichero externo, puedes añadir tu svg como una data URI. Esto te permitirá tratar tu svg como si fuera una url.

Ejemplo:

#midiv{
   background-color: green;
   width: 100px;
   height: 100px;
}

#midiv:before{
   content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>");
}
<div id="midiv"></div>

1

La misma pregunta se hizo en inglés y hasta donde encontré no es posible ya que el contenido se toma como STRING puro y el etiquetado de HTML no tiene efecto.

Te dejo el enlace correspondiente: https://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text

1

No es posible, ya que trata la cadena como un literal y no como lenguaje de marcado de hipertexto.

Ejemplo:

#midiv:before {
   content: "<svg>Esto no es posible, ya que trata a content como un literal</svg>";
}
<div id="midiv"></div>

Como se puede observar en el ejemplo, la etiqueta <svg> escrita en content es tratado literalmente.

0

Yo usaría JQuery... y usas la función .before() de tal manera que quedaría algo así...

<!DOCTYPE html>
<html>
<head>
<title>Before in JQuery</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>

<h1>Encabezado</h1>
<p>Parrafo</p>

<script type="text/javascript">
$("h1").before("<img style='width:50px;' src='https://weboverhauls.github.io/demos/svg/checkmark.svg'>");
</script>
</body>
</html>

y funcionaria perfectamente para lo que quieres...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.