olá, quando você aumentou o valor do eixo X para 100 fiquei em dúvida, pois se a imagem estava em zero, e o vetor caminhou para a esquerda, daria um número negativo em termos cartesianos. Aí pensei que o 100 se referiria então à largura da imagem que é justamente o que o eixo x trabalha. Mas parece que a imagem não aumentou, ela só andou. Como o CSS entende então que deveria andar para um lado e não para o outro, e qual é a medida deste 100 se não é nem coordenada cartesiana e nem largura?
hoje, com a Alura e o Google Gemini
Oi, Alini, como vai?
Desculpe a demora em te responder!
O atributo Viewbox é usado para definir o espaço de exibição (Viewport) de um SVG. Ele define as coordenadas (x, y) do canto superior esquerdo e a largura e altura (width, height) da área visível. A unidade de medida padrão é o pixel. Dito isso, o valor 100 refere-se ao eixo cartesiano "X".
Dessa forma, a imagem se movimentou da esquerda para a direita ao realizar a alteração do valor para 100, pois o valor é maior que zero e positivo.
Perceba que por conta da movimentação das nuvens e da relação entre largura e altura estabelecidas no Viewbox, criaram-se margens à esquerda e à direita para enquadrar a ilustração dentro da tela. Dessa forma, ao movimentar o eixo "X" para 100px a imagem deixou de ter a margem esquerda e ao alterar a largura da tela para 1300px a imagem deixou de ter a margem direita. É importante ressaltar que com essas alterações, houve um efeito sutil de "zoom in" na imagem para que pudesse ser ocupado todo o espaço disponível no Viewport.
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!