Viewbox é um atributo comumente usado ao criar formas SVG. Se você pensar no documento como uma tela, a caixa de visualização faz parte da tela que você deseja que o visualizador veja. Mesmo que a página possa cobrir toda a tela do computador, a figura pode existir apenas em um terço do todo.
Viewbox permite que você diga ao analisador para ampliar o terceiro. Elimina o espaço em branco extra. Pense na caixa de visualização como uma abordagem virtual para recortar uma imagem. Sem ele, seu gráfico aparecerá com um terço do tamanho real.
Valores da caixa de visualização
Para cortar uma imagem, você deve criar pontos na imagem para fazer os cortes. O mesmo acontece ao usar o atributo da caixa de visualização. As configurações de valor para viewbox incluem:
sirigaita-O começo x coordenarpequenino- o começo y coordenarlargura-Width do viewboxaltura-Altura da caixa de visualização
A sintaxe dos valores da caixa de visualização é:
viewBox = "0 0 200 150"
Não confunda a largura e a altura da caixa de visualização com a largura e a altura definidas para o documento SVG. Quando você cria um arquivo SVG, um dos primeiros valores que você estabelece é a largura e a altura do documento. O documento é uma tela. A caixa de visualização pode cobrir toda a tela ou apenas uma parte dela.
Esta caixa de visão cobre a página inteira.
Esta caixa de visão cobre metade da página que começa no canto superior direito.
Sua forma também tem atribuições de altura e largura.
É um documento que cobre 800 x 400 px com uma caixa de visualização que começa no canto superior direito e expande metade da página. A forma é um retângulo que começa no canto superior direito da caixa de visualização e move 100 px para a esquerda e 50 px para baixo.
Por que definir uma caixa de visualização?
O SVG faz muito mais do que apenas desenhar uma forma. Pode criar uma figura em cima da outra para um efeito de sombra. Pode transformar uma forma para que ela se incline em uma direção. Para os filtros avançados, você precisará entender e usar o atributo da caixa de visualização.
