Este artigo apresenta principalmente o uso dos atributos do ViewBox ao usar imagens SVG no HTML5, incluindo algum conteúdo responsivo relacionado ao design. Amigos que precisam podem se referir a ele para entender rapidamente os parâmetros da ViewBox
O atributo ViewBox é usado para especificar a origem e o tamanho do sistema de coordenadas da imagem SVG do usuário. Todo o conteúdo desenhado no SVG é feito em relação a esse sistema de coordenadas. Como a tela SVG é infinitamente estendida em todas as direções, você pode desenhar gráficos fora dos limites desse sistema de coordenadas; Mas esses gráficos posicionados em relação à janela SVG também podem ser controlados pela posição do sistema de coordenadas do usuário.
A propriedade ViewBox usa quatro parâmetros para especificar a localização da origem do sistema de coordenadas e seu tamanho: altura da largura XY. No caso inicial, esse sistema de coordenadas é equivalente ao sistema de coordenadas da janela inicializado (determinado pela largura e altura da imagem SVG), e sua origem está em (0, 0) - ou seja, o canto superior esquerdo do SVG.
Alterando os valores dos dois parâmetros x e y, a posição da origem pode ser ajustada. Altere os valores de largura e altura para alterar o tamanho do sistema de coordenadas. Basta usar o atributo ViewBox para ajudá -lo a expandir ou cortar a tela SVG. Leia com o exemplo.
IMPORTANTE: Neste artigo, não alterarei o comportamento padrão (escala e posição) do ViewBox dentro da janela SVG. Porque, de acordo com o comportamento padrão do atributo, o conteúdo do ViewBox será incluído o mais completamente possível na janela e depois colocado no centro. No entanto, o uso da propriedade PreserveasPectratio permite alterar livremente o tamanho e a posição do ViewBox, mas neste artigo, essa não é uma técnica necessária, para que também não expliquem em profundidade aqui.
Use ViewBox para cortar SVG, ou seja, use o atributo ViewBox para criar um SVG da direção da arte
Há um tempo atrás, um dos meus clientes pediu para definir o avatar SVG de seu site como tamanhos diferentes de acordo com diferentes tamanhos de tela, para que apenas uma pequena parte dele seja visível em uma tela pequena, uma parte maior pode ser vista em um tamanho de tela média e, em seguida, o conteúdo completo pode ser visto em uma tela grande. A primeira idéia que me veio à mente naquele momento era que seu requisito era usar o atributo ViewBox para cortar a imagem SVG e, em seguida, exibir uma certa parte da imagem que ele queria ver com base em diferentes tamanhos de tela.
Ao alterar o tamanho e a origem do sistema de coordenadas SVG, podemos cortar o SVG e exibir a parte do conteúdo que queremos exibir na janela.
Vamos ver como implementá -lo.
Suponha que tenhamos essa imagem SVG completa da seguinte maneira e, em seguida, queremos cortá -la do tamanho de uma tela pequena. Esta imagem é um vetor doméstico gratuito, projetado pela Freepik, licenciado sob o contrato Creative Commons Attribution 3.0. Por simplicidade, vamos primeiro assumir que a imagem é apenas sobre o que deve ser cortada para exibir em telas pequenas e médias, e o conteúdo completo exibido na tela grande, como mostrado abaixo.
A imagem à esquerda é a imagem completa que cortaremos usando a propriedade ViewBox, e a imagem à direita é a área que queremos exibir na tela pequena.
Agora, corte o SVG alterando o valor da propriedade ViewBox. Há algumas coisas que precisam ser consideradas, falaremos sobre elas mais tarde. Mas primeiro, precisamos alterar o sistema de coordenadas para corresponder ao conteúdo da área do retângulo de caixa virtual na figura acima. , ajustando a origem do sistema e os valores de largura e altura, podemos alterar seu valor inicial de parâmetro 0 0 0 800 800.
Mas como conhecemos as novas coordenadas e novas dimensões? O ponto não é passar por muitas experiências e erros repetidos.
Existem várias maneiras. Como já estamos no editor de gráficos (meu exemplo usa IA), podemos usar o painel do editor para obter a posição e as dimensões dos elementos.
Eu desenho esta caixa retangular pontilhada, além de representar o que quero exibir na tela pequena, outro motivo é que podemos obter a posição e as dimensões do retângulo e usá -las como o valor da caixa de vista. Usando o painel de transformação da IA (na foto abaixo), obtivemos os valores de que precisávamos. Ao selecionar o retângulo e clicar no link de transformação no canto superior direito, temos o painel mostrado na figura abaixo, incluindo os valores X, Y, Largura e Altura que precisamos.
O painel de transformação nesta IA pode ser usado para obter a posição e o tamanho do retângulo selecionado.
Você deve ter notado que o valor acima não é um número inteiro; portanto, precisamos modificá -lo manualmente. Com base nas informações acima, alteramos o valor da ViewBox para 0 200 512 512.
Como a proporção do novo ViewBox é a mesma da janela SVG (ambos quadrados), o conteúdo no ViewBox será expandido e apenas a área selecionada será exibida na janela. Depois de alterar o valor da ViewBox, o resultado é como mostrado na figura:
SVG recém -cortado. Somente o local onde especificamos que a propriedade ViewBox está visível na janela. A borda azul indica a janela do SVG.
Neste ponto, há um problema que precisa ser resolvido:
E se a proporção da área cortada (ou seja, ViewBox) for a proporção da janela SVG?
Nesse caso, haverá um estouro significativo. O transbordamento óbvio, não quero uma extensão além do limite da janela SVG, mas um excesso em relação ao novo sistema de coordenadas do usuário definido pelo ViewBox. A figura a seguir fornece explicações correspondentes.
Se a proporção do ViewBox for diferente da proporção do ViewBox, o conteúdo do SVG transbordará o sistema de coordenadas do usuário e o resultado pode ser assim.
A borda preta representa o novo sistema de coordenadas do usuário e a borda azul é a janela SVG.
A borda preta na imagem certa acima é a área definida pelo ViewBox. De acordo com o comportamento padrão do ViewBox na janela, ele será centrado e aumentado o máximo possível para garantir que seu conteúdo esteja incluído na janela (borda azul).
Como a tela SVG conceitualmente se estende infinitamente em todas as direções, você pode desenhar gráficos fora dos limites do sistema de coordenadas do usuário, e o conteúdo transbordará diretamente e se moverá, conforme mostrado na figura acima.
Se você alterar a proporção da janela SVG (a largura e a altura do SVG) para fazê -las se adaptar à proporção do ViewBox, você não verá transbordamento porque o zoom do ViewBox é adaptado à janela, como no exemplo anterior.
No entanto, em alguns casos, você não pode ou não mudar a proporção do SVG. Por exemplo, se você estiver usando o SVG Sprite como um conjunto de imagens para exibir imagens na página. Na maioria dos casos, uma imagem possui uma proporção fixa - e você não deseja alterar o tamanho da imagem, apenas para se adaptar ao conteúdo de uma pequena imagem dentro dela. Ou talvez você tenha incorporado um sistema de ícones e deseja que todos os ícones permaneçam do mesmo tamanho ao mesmo tempo.
Para cortar o excesso (por exemplo, alguns outros ícones no sprite são exibidos na janela), você pode usar <Clippath> para cortar o excesso. O caminho de recorte pode ser um elemento <ct> cobrindo toda a área do ViewBox e, em seguida, aplique esse elemento ao SVG da raiz.
No entanto, há outra coisa a se lembrar: verifique se as propriedades X e Y de <tt> são consistentes com o ViewBox, a menos que o RET esteja relativamente posicionado na origem do sistema original/inicializado, o conteúdo do SVG sendo cortado também é incerto.
CSS Code Copy Content para a área de transferência