google-chrome - trabajar - svg html5
Los archivos SVG en Chrome a veces no se procesan (3)
TERCER EDICIÓN: aquí hay un caso de prueba en funcionamiento. Parece que tiene algo que ver con el almacenamiento en caché de la svg spritesheet. Si configuro el control de caché en mi servidor para que no haya almacenamiento en caché de SVG, se produce el comportamiento. Siéntase libre de ver el código fuente (todo está en el único archivo, pero no quiero incluirlo todo aquí).
https://stuff.spherical.fish/svgtest.html
SEGUNDA EDICIÓN: La corrección que se muestra a continuación (inyectando directamente los elementos en index.html en lugar de usar una hoja de sprites externa) simplemente dejó de funcionar en Chrome v49 (que mi buscador de canales beta acaba de actualizar). v48 tiene el problema de renderizado intermitente, pero v49 bastante consistentemente no representa nada que se refiera sigue un patrón <svg><use></use></svg> ; pero solo en una página angular grande y complicada. Un caso de prueba simple y aburrido funciona bien. Se agregó una recompensa para cualquiera que pueda señalarme directamente a un problema conocido o de dónde provenga. Lo más seguro es que no sea file-not-found, ya que sigue siendo un error intermitente, y toda la página funciona bien en Firefox y Safari.
EDITAR: esto definitivamente tiene algo que ver con referirse a un recurso externo. Cuando incrusto los SVG directamente en index.html y los consulto con <use xlink:href="#id"></use> funcionan bien, pero si me refiero a un archivo externo en el elemento <use> , solo cargan a veces
Tengo un comportamiento extraño en Chrome (solo que esto no ocurre en opera, firefox, safari); Lo he estado viendo desde al menos los primeros 40 años, en cuanto a la versión.
Mi comportamiento está en el medio de una estructura angular repetida ng. Todo es igual, hay un montón de divs juntos. También hay un elemento SVG que se ve así:
<svg class="icon-3">
<use xlink:href="/assets/trellis-icons.svg#icon-users"></use>
</svg>
muy claro.
El problema es que, para algunos de estos elementos repetidos, el ícono no se procesa. La inspección del elemento en las herramientas de desarrollo de cromo indica que el elemento <use> del SVG renderizado tiene un alto y un ancho, mientras que el elemento no renderizado tiene un alto y un ancho cero.
No es que haya una diferencia real aquí; Incluso he editado manualmente el DOM para hacer que una de las entradas ofensivas coincida con una de las representadas por completo, pero la svg aún no se procesa. Aquí hay una captura de pantalla relevante.
Puede ver a continuación (e ignorar mis problemas de relleno con el botón) la primera fila no tiene los iconos de encabezados pequeños y de burbujas de palabras. Este es un problema intermitente: si recargo la página, puede estar bien, o tal vez ninguno de los íconos se cargará.
Me pregunto: ¿hay algún tipo de problema oscuro asociado con el uso de hojas de sprites (todos los SVG que exhiben este comportamiento están en el mismo archivo SVG grande y son mencionados por #id) cargando asincrónicamente o algo así?
Si este es un comportamiento realmente desconocido / nuevo, trabajaré en la ingeniería de un caso de prueba, pero construir algo que probablemente dependa de algún tipo de error de concurrencia es algo difícil. Así que pensé en preguntar primero.
EDITAR para agregar: Este comportamiento no ocurre si exporto el svg individual como una aplicación independiente y lo uso en una forma <img src="icon.svg"> . Todavía falla si hago un uso svg en el ícono en un solo archivo independiente.
EDITAR: solicitud de per @ kaiido, aquí está el svg relevante en cuestión.
<svg xmlns="http://www.w3.org/2000/svg">
<!-- thirty other symbols snipped -->
<symbol id="icon-users" viewBox="0 0 512 512">
<path d="m352 397c-15-16-78-32-109-48c-21-11-32-33-32-53c0-10 7-19 13-26c5-6 9-14 13-24c8-4 18-12 18-31c0-12-2-19-5-24c1-11 2-22 3-34c4-45-42-90-89-90c-47 0-92 45-88 90c1 12 2 23 3 34c-4 5-5 12-5 24c0 19 9 27 18 31c4 10 8 18 13 24c6 7 13 16 13 26c0 20-11 42-32 53c-18 9-48 19-72 28l0 68l354 0c0 0 0-32-16-48z m146-7c-21-8-46-16-62-24c-17-8-25-27-25-43c0-8 5-15 10-21c4-5 8-12 11-20c7-3 15-10 15-25c0-10-2-16-5-20c1-9 2-18 3-27c3-37-34-76-73-76c-38 0-75 39-72 76c1 9 2 18 3 27c-3 4-5 10-5 20c0 16 8 22 15 25c3 8 7 15 11 20c4 6 10 13 10 21c0 10-4 22-11 31c30 11 43 22 53 33c19 19 19 58 19 58l103 0z"/>
</symbol>
</svg>
Atributo xlink:href está en desuso desde SVG 2 ( enlace de prueba ). Las nuevas versiones de Chrome funcionan de manera extraña con este atributo.
Si usa xlink:href (para navegadores antiguos) y href (para navegadores nuevos) todo funcionará bien en todos lados.
Bueno, resulta que este es un error de Chrome después de todo, y más o menos lo que había pensado que era: cambiar los elementos de <use> alrededor de las pausas en ciertas circunstancias. Esas circunstancias son básicamente: cuando svg spritesheet no se almacena en caché en el navegador.
https://code.google.com/p/chromium/issues/detail?id=580809
Corregido en canario (M50), podría fusionarse en M49.
La solución consiste en establecer un encabezado de control de caché en la hoja de sprites SVG que sea mayor que cero. Eso también ayuda a explicar por qué solo vi este error en mi servidor de prueba y no en producción: tengo diferentes configuraciones de caché en mi cuadro beta.
Yo también tuve este error. Se corrigió con la solución pfooti mediante el almacenamiento en caché y luego mediante la actualización de webkit.
Pero luego regresó: no era lo mismo, pero podría ser útil para otros, más tarde.
Abrí mi SVG con Inkscape (pero lo mismo funciona en Illustrator, también), seleccioné mi objeto y apliqué path > union , y guardé:
<path class="st0" d="M32 272l128 48 16 160 80-112 112 112L480 32 32 272zm318.7 145.4L256 320l128-176-192 153.8-82.6-31 322-172.5-80.7 323.1z"/>
convirtió
<path d="M480 32L32 272l128 48 16 160 80-112 112 112L480 32zm-48.6 62.3l-80.7 323.1L256 320l128-176-192 153.8-82.6-31 322-172.5z"/>
¡Y ahora funciona!
No sé exactamente por qué, pero Chrome parece tener algún problema con la primera sintaxis. ¡Espero eso ayude!