html - manipulation - SVG cambia de color cuando se gira en Safari 10
svg on img tag (1)
Acabo de encontrarme con un problema muy extraño que solo aparece en Safari 10. Tengo naipes, imágenes svg, que a veces se rotan usando
transform:rotate(xdeg)
.
La tarjeta que estoy usando tiene un patrón de bloque rojo. Cuando no se gira, o gira en ángulo recto, es decir, 90, 180, 270, entonces parece normal. ¡Pero, cualquier otro ángulo que no sea ese y el patrón de fondo se vuelve azul! Acabo de recibir un informe sobre esto de uno de mis usuarios y nunca he visto nada tan extraño. Otros navegadores funcionan normalmente, Safari 9 lo hace normalmente.
Supongo que esto es solo un error realmente extraño en Safari 10, pero ¿alguna idea sobre cómo solucionarlo? He creado una reproducción mínima en:
Error extraño de hecho.
Realizar la transformación al envolver el elemento
g
como una transformación SVG no resuelve el problema.
Sin embargo, al realizar una rotación 3D en lugar de una 2D, es decir,
inlineCard.style.transform = ''rotate3d(0,0,1,'' + e.currentTarget.value + ''deg)'';
resuelve el problema, puedes ver aquí.
