Así que los detalles de esta pregunta son un poco obtusos. Esto es lo que mi equipo está tratando de hacer... Estamos usando Figma para crear SVG. Estos SVG son relativamente simples, pero los usamos para crear animaciones en el cuerpo de nuestra aplicación. Nuestra aplicación se basa en HTML5 Canvas. Una vez que se carga un archivo de imagen, se dibuja en el lienzo utilizando el método CanvasRenderingContext2D.drawImage() . Aquí está el pateador. Algunos SVG simplemente no aparecen. Aparecen otros. Algunos pueden aparecer parcialmente. Aquí está el problema que me lleva a StackOverflow (aunque con suerte, podré proporcionar una respuesta en breve). Algunos SVG usan un degradado lineal generado por Figma, pero esos degradados lineales no se representan en absoluto en JS Canvas. ¡Lo peor es que este problema solo ocurre en Chrome! Probé el mismo proceso en Safari, y funciona.
Entonces, esta es la cuestión: ¿ alguien ha encontrado este tipo de problema SVG específico del navegador con gradientes lineales y, de ser así, cómo lo solucionó?
Sospecho que la respuesta está en el formato de la etiqueta linearGradient. Aquí hay dos versiones del mismo archivo, una de Figma y otra de Inkscape (la de Inkscape funciona).
figma
<defs> <linearGradient id="paint0_linear_338:2881" x1="400" y1="0" x2="400" y2="800" gradientUnits="userSpaceOnUse"> <stop stop-color="#99CCFF" stop-opacity="0.6"/> <stop offset="0.864583" stop-color="#87C3FF" stop-opacity="0.1"/> </linearGradient> <clipPath id="clip0_338:2881"> <rect width="800" height="800" fill="white"/> </clipPath> </defs>paisaje de tinta
<defs id="defs1024"> <linearGradient inkscape:collect="always" id="MAINGRAD"> <stop style="stop-color:#99ccff;stop-opacity:0.60000002" offset="0" id="stop2574" /> <stop style="stop-color:#87c3ff;stop-opacity:0.1" offset="1" id="stop2576" /> </linearGradient> <clipPath id="clip0_338:2881"> <rect width="800" height="800" fill="white" id="rect1021" /> </clipPath> <linearGradient inkscape:collect="always" xlink:href="#MAINGRAD" id="linearGradient3482" gradientUnits="userSpaceOnUse" x1="399.724" y1="2.1855699e-08" x2="399.724" y2="800" /> </defs>El problema resultó ser relativamente simple. El lienzo en Chrome parece ser sensible a las identificaciones que contienen ciertos formatos. Usé la siguiente herramienta para simplificar el formato de archivo Figma exportado.
pip install scour scour -i input.svg -o output.svg --shorten-ids Scour simplemente analiza el archivo y reemplaza cada ID único con la cadena más corta posible. En este caso, reemplazando paint0_linear_338:2881 con a archivo . Este fue el único cambio necesario para solucionar el problema, y sospecho que el problema fue el colon. No me sorprendería si las actualizaciones en futuras versiones de Chrome solucionan este error.
(Versión actual de Chrome: 94.0.4606.81 (Official Build) (arm64) )