Sprites con SVG o libreria de imagenes SVG
Publicado por Roxana (1 intervención) el 29/07/2020 12:38:56
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 por su apoyo
Archivo HTML:
Archivo Externo iconos-svg.svg:
Archivo Css estilos.css
Solo me funciona si pongo todo el código en el HTML asi no reconoce a mi archivo externo SVG
Archivo HTML:
1
2
3
<div >
<svg class="iconos-audio"><use xlink:href="iconos-svg#play"></use></svg>
</div>
Archivo Externo iconos-svg.svg:
1
2
3
4
5
6
7
8
9
<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-144c5.024-2.848,8.16-8.16,8.16-13.952S300.864,148.897,295.84,146.049z"/>
</symbol>
</svg>
Archivo Css estilos.css
1
2
3
4
5
.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
1
2
3
4
5
6
7
8
9
10
<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-144c5.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>
Valora esta pregunta
0
