Autor Tema: Sprites con SVG o libreria de imagenes SVG  (Leído 83 veces)

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

Desconectado rchavezr
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 1
    Ingreso: Julio de 2020
  • pe
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
Sprites con SVG o libreria de imagenes SVG
« on: 29 Julio de 2020, 07:49 am »
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>

Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1049
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:Sprites con SVG o libreria de imagenes SVG
« Respuesta #1 on: 29 Julio de 2020, 02:55 pm »
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!