Noticias:

¿Quieres formar parte de Bomber Code? Entonces entra a este tema: Postulaciones al Staff

Menú principal

Sprites con SVG o libreria de imagenes SVG

Publicado por rchavezr, 29 Julio de 2020, 07:49

Tema anterior - Siguiente tema

0 Usuarios y 1 Visitante están viendo este tema.

rchavezr

Hola amigos, necesito de su ayuda, quiero usar varias imágenes SVG en mi html y luego modificar sus atributos de tamaño, colores, etc por ello deseo todas las imágenes SVG ponerlas en un archivo y luego llamarlas desde mi html y ponerle estilos desde un Css pero no me funciona cuando le hago referencia al archivo externo de los SVG, me pueden decir que estoy haciendo mal? Muchas gracias

Archivo HTML:
                     <div >
                             <svg class="iconos-audio"><use xlink:href="iconos-svg#play"></use></svg>   
                        </div>

Archivo Externo iconos-svg.svg:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="play" viewBox="0 0 320.001 320.001">
    <path d="M295.84,146.049l-256-144c-4.96-2.784-11.008-2.72-15.904,0.128C19.008,5.057,16,10.305,16,16.001v288
            c0,5.696,3.008,10.944,7.936,13.824c2.496,1.44,5.28,2.176,8.064,2.176c2.688,0,5.408-0.672,7.84-2.048l256-144
            c5.024-2.848,8.16-8.16,8.16-13.952S300.864,148.897,295.84,146.049z"/>                               
  </symbol>
                               
</svg>       

Archivo Css estilos.css
.iconos-audio{
    fill:#797d7f;
    width:25px;
    height:25px;
}

Solo me funciona si pongo todo el código en el HTML asi no reconoce a mi archivo externo SVG
                        <div >
                            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                <symbol id="play" viewBox="0 0 320.001 320.001">
                                  <path d="M295.84,146.049l-256-144c-4.96-2.784-11.008-2.72-15.904,0.128C19.008,5.057,16,10.305,16,16.001v288
                                          c0,5.696,3.008,10.944,7.936,13.824c2.496,1.44,5.28,2.176,8.064,2.176c2.688,0,5.408-0.672,7.84-2.048l256-144
                                          c5.024-2.848,8.16-8.16,8.16-13.952S300.864,148.897,295.84,146.049z"/>                               
                                </symbol>                                                             
                              </svg>       
                             <svg class="iconos-audio"><use xlink:href="#play"></use></svg>   
                        </div>

Rock Lee

Vamos por partes ¿que estas tratando de hacer puntualmente? tengo entendido ciertos atributos SVG tienen estar en el mismo archivo sino no funciona, unos pocos funciona separado haciendo una previa llamada del archivo en el head como el css.


Saludos Familia!

Temas Similares (5)