Quiero colocar algunas imágenes SVG antes de que algunos de los elementos seleccionados. Estoy usando JQuery pero eso es irrelevante. Me gustaría tener la :antes de elemento 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, es solo mostrar la cadena. He comprobado las especificaciones y parece ser que existen algunas restricciones en lo que el contenido puede ser. Hay un trabajo en torno a esta restricción? Sólo el contenido css es relevante a mi pregunta.

  • Es algo de malo en usar como imagen de fondo?
  • Quiero usarlo para generar fantasía punteros de interfaz de usuario JQuery información sobre herramientas. Lo hago ahora con CSS pseudo elementos de hack pero que me da sólo de triángulos. Imagen de fondo no funciona en este caso como tengo algo que está fuera del elemento.
  • Y yes…@cimmanon gracias. No puedo upvote como soy nuevo en este foro.
InformationsquelleAutor Sunny | 2013-10-08

7 Comentarios

  1. 197

    Sí se puede! Acaba de probar este y funciona muy bien, esto es impresionante! Todavía no funciona con html, pero lo hace con svg.

    En mi index.html tengo:

    <div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

    Y mi prueba.svg se parece a esto:

    <svg xmlns="http://www.w3.org/2000/svg">
       <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
       <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
    </svg> 
    • A menos que los svg son especiales, usted debe ser capaz de tratar con ellos como si se tratara de una imagen: content: url(path/to/my.svg). Eso no significa necesariamente que iba a funcionar con la interfaz de usuario jQuery información sobre herramientas de la biblioteca, aunque.
    • hmm, eso es dulce, quiero probar eso. Así que en my.html o lo que podría tener un montón de código html para representar… suena genial.
    • Voy a darle una oportunidad. Me pregunto por qué SVG nunca lo hizo grande. Me voy a volver a la programación después de 7 años de la brecha y se sorprendió al encontrar que SVG es tan infrautilizado a pesar de compatibilidad del navegador ahora para todos SVG básicos. Cualquier comentario?
    • Sí, funciona muy bien!
    • Sí se resuelve el problema de un modo indirecto. Sería agradable si había una manera de especificar una dirección URL como algo parecido a «thisFile->some_div_id o some_svg_id» por lo que el SVG efectivamente podría ser integrado en el llamado archivo de sí mismo. Voy a comprobar la dirección «URL» especificaciones en detalle si esto es posible mediante el uso de algunos de sintaxis.
    • ¿Por qué quieres hacer esto? Si usted tiene el svg código en el archivo ya, entonces no hay necesidad de ponerlo en una pseudo-clase. El punto entero de la pseudo-clases es reducir los elementos de DOM cuando se quiere añadir un poco de contenido, pero en tu caso si usted sólo tiene que utilizar su código svg normalmente no será peor (y probablemente más limpio) que ponerlo en una pseudo-clase(que es también, probablemente, imposible). A menos que, por supuesto, si usted quiere poner su código svg en un montón de lugares, en cuyo caso usted debe seguir su svg código en un archivo independiente como una imagen.
    • Perdiste tu comentario anterior. La razón por la que estoy usando pseudo clase es generar las flechas para que la herramienta de consejos para los campos de Formulario. No estoy restringido a la CSS de triángulos. Pensé que si yo pudiera tener en la línea de SVG en su lugar, podría tener de fantasía basado en vectores, incluso generadas dinámicamente descripción punteros se muestra de muchas formas. Pensé que al menos se merecen la cortesía de una respuesta. Lo siento por el retraso.
    • Teniendo en cuenta que SVG puede tener en línea de comandos. Es este un posible problema de XSS?
    • por desgracia, no creo que esta solución funciona con SVG sprites. por ejemplo, content: url(mysprite.svg#my-icon) en realidad no tire su icono. me encantaría estar equivocado, sin embargo 🙂
    • He encontrado el mismo @Jason. Gran decepción!
    • semántica. El HTML = estructura, CSS = presentación. Si un SVG es decorativo, no debería estar en la estructura HTML, debe ser en el CSS.
    • Bueno por lo que esta es la mejor solución hasta el momento, pero esto no funciona con el pseudo-elemento, por desgracia. 🙁 No cambie el tamaño a su tamaño: jsbin.com/xagobimiti
    • Se puede aplicar el SVG como una imagen de fondo en lugar de codepen.io/yayMark/pen/dKaqay
    • Sólo asegúrese de que si su SVG es sensible, tiene que establecer display: inline-block; para que se respete la anchura/altura de propiedades. De lo contrario, se usará su exportado tamaño.
    • Dezman: Hay buenas razones para ello, como cuando usted no tiene acceso a modificar la estructura del código HTML. Por ejemplo, algunos 3ra parte plugin representa un botón y el botón se necesita un icono personalizado. Es mucho más fácil sólo la inyección de un pseudo-elemento y hacer con ella (y vaya alevines de los peces más grandes), en lugar de gastar X cantidad inmensa de tiempo en investigar y correctamente/seguridad/eficientemente la ramificación y la modificación de código fuente original. Dependiendo del contexto (de 1 persona de proyecto vs gran proyecto corporativo, acceso privado vs público de acceso, etc), esto es bueno o malo.
    • Lo que sobre en línea SVG código? O más bien, inline HTML.

  2. 113

    Sí. Usted puede agregar el SVG como imagen de fondo de un vacío :después de o :antes. Aquí vamos:

    .anchor:before {
      display: block;
      content: ' ';
      background-image: url('../images/anchor.svg');
      background-size: 28px 28px;
      height: 28px;
      width: 28px;
    }
    • Esto me parece una de las mejores soluciones, después de buscar por un tiempo. Usted puede controlar cada aspecto del elemento insertado y funciona en el modo normal de estilo CSS las hojas de las obras, con separación de la lógica. Gran
    • …ahh esto tengo mis esperanzas, hasta que me doy cuenta de que background-size no es compatible con Opera Mini. Esto es tan frustrante.
    • Trabajó mucho. @deathlock de fondo, el tamaño no debería ser necesario que se están definiendo las dimensiones en el svg en sí, no lo necesitaba.
    • Deben ser las respuestas aceptadas ya que la pregunta dice «en un pseudo elemento :antes de o :después de»
    • He tenido que añadir <?xml version="1.0" encoding="utf-8"?> para el comienzo de mi archivo svg para hacer obras.
  3. 96
    #mydiv:before {
        content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
        display:block;
        width:22px;
        height:10px;
        margin:10px 5px 0 10px;
    }

    asegúrese de que su svg no contiene comillas dobles, y uriencode cualquier símbolo#.

    • Desde SVGs a menudo el uso de comillas dobles, usted también puede utilizar exterior comillas simples. @Jenny sugerencia es una gran manera de hacerlo si no quieres usar una externa archivo SVG.
    • Esto es genial. Lamentablemente sólo funciona con Chrome para mí (probado en Chrome, Firefox y Borde).
    • OK funciona en FF. Simplemente es necesario prestar atención a la «no #» parte. También asegúrese de utilizar la etiqueta div (no parece funcionar con vinculación). Lamentablemente todavía no hay éxito para el Borde.
    • Como tantas soluciones brillantes, no es compatible con IE11. url('file.svg') funciona sin embargo.
    • Lo que me pareció importante es agregar xmlns='http://www.w3.org/2000/svg' en el <svg> con el trabajo en Chrome 66.x. Por ejemplo pequeñas chevron 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>");
    • fyi # urlencodes a %23, y también tiene que eliminar todos los saltos de línea.

  4. 26

    Haciendo uso de CSS sprites y los datos uri da extra de beneficios interesantes como una carga rápida y menos solicitudes Y obtener IE8 apoyo por la utilización de la imagen/base64:

    Codepen muestra el uso de SVG

    HTML

    <div class="div1"></div>
    <div class="div2"></div>

    CSS

    .div1:after, .div2:after {
      content: '';
      display: block;
      height: 80px;
      width: 80px;
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
    }
    .div2:after {
      background-position: -80px 0;
    }

    Para IE8, el cambio a este:

      background-image: url(data:image/png;base64,data......);
    • Pero esto no es escalable, ¿no? Yo no puedo cambiar el tamaño a 16px o 320 px a voluntad.
    • Por supuesto, las escalas, aunque no es mi ejemplo, ya que tiene un tamaño fijo establecido, 80px ancho/alto.
    • ¿Puedo preguntarle si usted votada abajo debido a que el ejemplo anterior no escala?
    • ¿cómo le hacen escala? Y no, yo no.
    • Gracias, y aquí es una manera de escala svg: jsfiddle.net/ess6ywce … usando por ciento. También, de búsqueda, de MODO que con scale svg y encontrarás muchas más formas
    • Lo siento – me refiero a que, ¿cómo le hacen escala como una imagen de fondo? Tratado de buscar en el SO y todos los que he encontrado consulte en línea SVG. El único método que se me ocurre es usando background-size: cover, pero el soporte es un poco mediocre en Opera Mini…
    • Has probado a utilizar CSS object-fit? Funciona de la misma manera como background-size: cover en un imgOpera Mini soporteRecurso de ejemplo
    • He escuchado de object-fit. Eso es genial! He estado jugando un poco con ella, y por desgracia parece que sólo funciona con imágenes en línea (y no con el fondo de la imagen)? Sería poco difícil cuando tenemos que lidiar con la separación de contenido y presentación…

  5. 15
    <div class="author_">Lord Byron</div>

    CSS:

    .author_ {  font-family: 'Playfair Display', serif; font-size: 1.25em; font-weight: 700;letter-spacing: 0.25em; font-style: italic;
      position:relative;
      margin-top: -0.5em;
      color: black;
      z-index:1;
      overflow:hidden;
      text-align:center;
     
    }
    
    
    .author_:after{
       left:20px;
      margin:0 -100% 0 0;
      display: inline-block;
      height: 10px;
      content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20-12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6%2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20-49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C-2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40%2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C-9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15%20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
    }
    .author_:before {
      right:20px;
      margin:0 0 0 -100%;
      display: inline-block;
      height: 10px;
      content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28%2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C-7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102%2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2%2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C-22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
    }

    HTML:

    	<div class="author_">Lord Byron</div>

  6. 4

    Ser cuidadoso de todas las otras respuestas tienen algún problema en IE.

    Vamos a tener esta situación el botón con antepone icono. Todos los navegadores se encarga de esto correctamente, pero IE toma el ancho del elemento y escalas el contenido para ajustarlo. JSFiddle

    #mydiv1 { width: 200px; height: 30px; background: green; }
    #mydiv1:before {
        content: url("data:url or /standard/url.svg");
    }

    Solución es ajustar el tamaño para antes de elemento y dejarla donde está:

    #mydiv2 { width: 200px; height: 30px; background: green; }
    #mydiv2:before {
        content: url("data:url or /standard/url.svg");
        display: inline-block;
        width: 16px; //only one size is alright, IE scales uniformly to fit it
    }

    La background-image + background-size soluciones funciona igual de bien, pero es poco torpe, ya que se puede especificar el mismo tamaño dos veces.

    El resultado en IE11:

    Hay una manera de usar SVG como contenido en un pseudo elemento :antes de o :después de

  7. 0
    .myDiv {
      display: flex;
      align-items: center;
    }
    
    .myDiv:before {
      display: inline-block;
      content: url(./dog.svg);
      margin-right: 15px;
      width: 10px;
    }
    • Deberías explicar un poco más tu respuesta. Sólo a partir de este, es realmente difícil decir cómo o por qué su respuesta obras.

Dejar respuesta

Please enter your comment!
Please enter your name here