Bomber Code

Web Master => Programación Web => Mensaje iniciado por: rchavezr en 29 Julio de 2020, 07:49 am

Título: Sprites con SVG o libreria de imagenes SVG
Publicado por: rchavezr en 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>
Título: Re:Sprites con SVG o libreria de imagenes SVG
Publicado por: Rock Lee en 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!