Estoy usando lib react-native-svg para mostrar SVG en mi aplicación móvil. En iOS, se muestra correctamente, pero en Android, muestra un corte. También adjuntaré una captura de pantalla como referencia. ¿Puede alguien ayudarme a resolver este problema?
Captura de pantalla de iOS Captura de pantalla de iOS
Captura de pantalla de Android Captura de pantalla de Android
Complemento SVG https://jsfiddle.net/vhft358e/
Su SVG tiene un par de problemas. Una es que viewBox tiene el tamaño incorrecto para su imagen. Es mucho más pequeño que el contenido SVG. Pero dado que el SVG se muestra principalmente, no creo que ese sea su principal problema.
Su SVG usa mask-type: alpha . Puede ser que ese sea el problema. Tal vez no sean compatibles correctamente con Android. O tal vez el análisis y la representación de máscaras están un poco rotos en la versión de Android de react-native-svg.
Cosas para probar:
Esas dos máscaras no necesitan ser máscaras de tipo alfa. Elimine el style="mask-type: alpha" de ambas máscaras, y el SVG seguirá teniendo el mismo aspecto. Tal vez también se procesarán correctamente entonces.
Intenta modificar tu SVG para que no use máscaras. Una máscara simplemente crea la forma de contorno de rectángulo redondeado del icono. Eso podría cambiarse a un clip. La otra máscara simplemente corta el arco inferior del guardabarros del autobús. Puede quitar la máscara modificando la forma y el color del guardabarros.
