A transformação SVG gira em 90, 180 ou 270 graus, não funcionando em círculo no Safari iOS 10
Quero criar um gráfico de rosca usando um elemento de círculo SVG definindostroke-dasharray e variandostroke-dashoffset. O elemento SVG precisa ser girado em 270 (ou -90) graus para que a "barra" do gráfico comece no topo. Aqui está o código:
O ângulo de rotação é especificado usando o primeiro número notransform="rotate(270, 80, 80)".
O problema é: quando visualizada no Safari no iOS 10, essa rotação não é aplicada. De fato, definir rotação de 90, 180 ou 270 graus não tem efeito. Os mesmos ângulos, mas negativos (por exemplo, -90) também não são aplicados.
Aqui está uma captura de tela do violino acima no Safari no iOS 10.0.1:
E aqui está o mesmo violino no Safari no iOS 9.3.5:
Como solução alternativa, descobri que usar algo como 270,1 graus resolve o problema, no entanto, gostaria de saber por que o 270 não está funcionando e se existe uma maneira melhor de lidar com isso.