Fernando Alejandro Yerena Ramos
PreguntaEstoy agregando los iconos a una pagina web. Los iconos los guardo en archivos SVG.
Esta es la forma en que los importo al HTML:
<svg class="icon-search"> <use id="search" xlink:href="./images/icons/search.svg#search" > </use> </svg>
El problema es que en Chrome no importa la mascara del archivo, por lo cual el icono no se ve como debería. Pero solo me pasa en Chrome, en Firefox no tengo ese problema.
Así es como se ve en Chrome y lo que computa el navegador.
Y así es como se en Firefox y lo que computa el navegador
Cuando escribo el codigo del SVG directamente en HTML no sucede y se ve bien en ambos navegadores. Pero me gustaría saber por qué sucede el error al importarlo de un archivo SVG.
Dejo el repositorio en github por si quieren echarle un vistazo.
https://github.com/ferdinandalexa/petme/tree/develop
Gracias de antemano.
Fernando Alejandro Yerena Ramos
Ok, me dí cuenta que Chrome me lanzaba un error. Error por el cual no me mostraba los iconos con la corrección hecha en el ultimo comentario.
Unsafe attempt to load URL file:///C:/Users/Lenovo/Documents/Estudios/proyectos/websites/petme/images/icons/menu.svg#menu from frame with URL file:///C:/Users/Lenovo/Documents/Estudios/proyectos/websites/petme/index.html. 'file:' URLs are treated as unique security origins.
Para solucionarlo tuve que correr un servidor local. Y se soluciono.
Pero tengó la siguiente duda ¿Por qué ocurre ese error solo en Chrome?¿Por qué se soluciono al correr un servidor?
Fernando Alejandro Yerena Ramos
Ya probé definiendo la mascara con la etiqueta defs; definiendo como simbolo con la etiqueta symbol. De hecho elímine algunas cosas que sobraban en el SVG.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="search" viewBox="0 0 32 32"> <g> <circle id="mask-inner-circle" cx="13.013333333333337" cy="13.013333333333339" r="10" fill="none" stroke="white" stroke-width="5" vector-effect="not-scaling-s"/> <rect width="4.267" height="15.787" x="22.777" y="17.017" transform="matrix(0.707,-0.707,0.707,0.707,-10.318,24.91)"/> </g> </symbol> </svg>
En firefox muestra de manera correcta los iconos. Pero en Chrome directamente no aparecen. El
#shadow-rootFernando Alejandro Yerena Ramos
Ya probé definiendo la mascara con la etiqueta
defssymbolY usando esta última, lo que sucede es que, en Firefox, el círculo de la lupa 🔎 se vuelve un cuadrado con bordes redondeados 🤷🏽♀️. Y en Chrome directamente no aparece.
