Viewport e ViewBox SVG

O viewport (Viewport) e o viewBox (ViewBox) da imagem SVG podem definir o tamanho da parte visível da imagem.

Diferença entre viewport e viewbox

1、viewport é o viewport, equivalente à tela do monitor.

2、viewbox é a área de exibição, equivalente a cortar um pequeno bloco na tela e ampliá-lo para toda a tela, resultando em um efeito de close-up.

3、preserveAspectRatio especifica o alinhamento e a maneira de escalonar o viewbox com o viewport.

Viewport (Viewport)

O viewport (Viewport) é a área visível da imagem SVG. Lógicamente, a imagem SVG pode ser tão larga e alta quanto você quiser, mas apenas uma parte específica da imagem pode ser vista de uma vez. A área visível é chamada de viewport (Viewport).

Você pode usar os atributos width e height do elemento para especificar o tamanho do viewport (Viewport) <svg>. Este é um exemplo:

<svg width="500" altura="300"></svg>

O viewport (Viewport) definido neste exemplo é5Unidade larga e3Unidade alta.

Unidades do sistema de coordenadas

Se você não especificar nenhuma unidade nos atributos width e height, a unidade será presumida como pixels. Ou seja, width500 representa5pixels.

Se você gostar de usar uma unidade diferente de pixels, pode. A seguir está a lista de unidades que podem ser usadas com o elemento <svg>:

A unidade definida no elemento <svg> afeta apenas o tamanho do elemento <svg> (Viewport). O tamanho das formas SVG exibidas na imagem SVG é determinado pela unidade definida em cada forma. Se não for especificada uma unidade, a unidade será padrão em pixels.

Este é um exemplo que mostra um <svg> com um conjunto de unidades para elementos, que contém formas com seus próprios conjuntos de unidades:}

<svg width="10cm" height="10cm">
　　　　<rect　x="50" y="100" width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill: none;"/>
　　　　<rect　x="100" y="100" width="50mm" height="50mm"
　　　　　　　　　　style="stroke: #000000; fill: none;"　/>
</svg>

A imagem <svg> tem suas unidades definidas em cm. Os elementos <rect> têm seus próprios conjuntos de unidades. Um usa pixels (sem unidades definidas explicitamente) e o outro usa width e height em mm.

Esta é a imagem gerada. Note que a caixa da direita (com width e height em mm) é maior que a caixa da esquerda.

ViewBox

Você pode redefinir o significado das coordenadas sem unidade dentro do elemento <svg>. Você pode usar a propriedade viewBox para fazer isso. Este é um exemplo:

<svg width="500" altura="200" viewBox="0 0　50　20" >
　　　　<rect　x="20" y="10"　width="10"height="5"
　　　　　　　　　　estilo="stroke: #000000; fill:none;"/>
</svg>

Neste exemplo, cria-se um <svg> com uma largura de500 pixels, e a altura é200 dos elementos. O atributo viewBox do <svg> contém quatro coordenadas. Essas coordenadas definem o viewBox do elemento <svg>. As coordenadas são x y largura altura do viewBox.

Neste caso, o viewBox começa em 0,0 e50 largura e20 altura. Isso é,500 x 200 pixels<svg>elemento interno usa o sistema de coordenadas de 0,0 até50,20. Em outras palavras, cada um dos pontos de coordenadas internas da forma usada1unidades <svg> correspondem à largura500/50 = 10pixels, e a altura corresponde200/20 = 10pixels. Isso é por que a posição x é20, e a posição y é10A razão pela qual o retângulo verdadeiro está localizado200,100, e sua largura (10e a altura (5respetivamente correspondem a100 pixels e50 pixels.

Outra maneira de explicar é que os dois primeiros pontos do atributo viewBox no <svg> definem a coordenada do canto superior esquerdo do usuário, e os dois últimos pontos definem a coordenada do canto inferior direito do usuário. O espaço dentro do <svg> é interpretado como da coordenada superior esquerda do viewBox até a coordenada inferior direita.

Efeito da imagem após a execução:

Atenção, como todas as coordenadas internas do elemento <rect> são interpretadas1unidades.10pixels.

Manter a proporção de largura e altura

Se a proporção de largura e altura (aspect ratio) do viewport (área de visualização) e do viewBox (área de exibição) forem diferentes, é necessário especificar como o visualizador de SVG (por exemplo, o navegador) deve exibir a imagem SVG. Você pode usar a propriedade preserveAspectRatio do elemento para fazer isso <svg<.

O atributo preserveAspectRatio adota dois valores separados por espaço. O primeiro valor diz como a caixa de visualização (ViewBox) se alinha dentro da visualização (Viewport). Este valor em si é composto por duas partes. O segundo valor indica como manter a proporcionalidade da largura e da altura (se houver).

O primeiro valor da maneira de alinhar especificada pelo atributo preserveAspectRatio é composto por duas partes. A primeira parte especifica o alinhamento x, e a segunda parte especifica o alinhamento y. Aqui está a lista de valores de alinhamento x e y:

Ao adicionar o componente y após o componente x, pode-se combinar o componente x e o componente y em um valor. Aqui estão dois exemplos:

xMaxYMax
xMidYMid

Estes dois exemplos mostram diferentes maneiras de alinhar a caixa de visualização (ViewBox) com a visualização (Viewport). O primeiro exemplo alinha o bordo direito da caixa com o bordo direito da visualização. O segundo exemplo alinha o meio da caixa com o meio da visualização.

A segunda parte do valor da propriedade preserveAspectRatio pode assumir três valores diferentes:

A segunda parte do valor da propriedade preserveAspectRatio é adicionada à primeira parte e separada por espaço. Aqui estão dois exemplos:

preserveAspectRatio="xMidYMid meet"
preserveAspectRatio="xMinYMin slice"

Eu ainda não discuti os efeitos das diferentes configurações de preserveAspectRatio, então vamos ver.

Os seguintes exemplos todos configuram width como500 e configure height como75， configure a propriedade viewBox como 0 0 250 75pixels. Isso significa que ao longo do eixo x, cada unidade de coordenada corresponderá a2pixels, mas ao longo do eixo y, cada unidade de coordenada corresponderá a1pixels. Como você pode ver, a proporção ao longo do eixo x é500/250 = 2，a proporção ao longo do eixo y é75/75 = 1。 Isso pode resultar em distorção da imagem, mas vamos ver nos seguintes exemplos como as diferentes configurações de preserveAspectRatio lidam com essas configurações.

Este é o primeiro exemplo com preserveAspectRatio definido como xMinYMin meet. Isso garante que a proporção de largura e altura seja mantida e o tamanho da caixa de visualização (ViewBox) ajustado para se adequar à caixa de visão (Viewport). Em outras palavras, com base nas duas proporções de largura e altura (a proporção ao longo do eixo y é1）Ajuste o tamanho da caixa de visualização (ViewBox) com base no menor. Devido ao componente xMinYMin, a caixa de visualização (ViewBox) ficará no canto superior esquerdo da caixa de visão (Viewport). Este é o código e a imagem gerada:

<svg width="500" altura="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　meet"
　　　　　estilo="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　estilo="stroke: #000000; fill:none;"/>
</svg>

No segundo exemplo, a configuração preserveAspectRatio foi definida como xMinYMin slice. Isso permite manter a proporção de largura e altura, mas ajusta a caixa de visualização (ViewBox) com base na proporção maior (a proporção ao longo do eixo x é2）Ajuste o tamanho da caixa de visualização (ViewBox), resultando em uma imagem太大而 não caber na caixa de visão (Viewport). A imagem é chamada de "fatia".

<svg width="500" altura="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　slice"
　　　　　estilo="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　estilo="stroke: #000000; fill:none;"/>
</svg>

O terceiro exemplo tem a configuração preserveAspectRatio definida como none. Isso significa que a caixa de visualização (ViewBox) ocupará toda a caixa de visão (Viewport), resultando em distorção da imagem, pois as proporções de largura e altura ao longo do eixo x e y não são as mesmas.

<svg width="500" altura="75"　viewBox="0　0　250　75"　　　　　　preserveAspectRatio="none"
　　　　　　estilo="border:　1px solid #cccccc;">
　　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　　estilo="stroke: #000000; fill:none;"/>
</svg>

Alinhamento da caixa de visualização (ViewBox)

Até agora, todos os exemplos exibidos usaram a configuração xMinYMin. Dependendo de como você quiser alinhar a caixa de visão (Viewport) com a caixa de visualização (ViewBox), você pode usar outras configurações. Vou explorar mais profundamente como essas configurações funcionam, mas vamos primeiro ver um exemplo:

<svg width="500" altura="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
estilo="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
estilo="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" altura="100" viewBox="0 0　50　50"　　　　
preservarRelaçãoDeAspecto="xMidYMin meet"　　　　
estilo="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
estilo="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" altura="100" viewBox="0 0　50　50"　　　　
preservarRelaçãoDeAspecto="xMaxYMin meet"　　　　
estilo="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
estilo="stroke: #000000; fill:none;"/>　　　　
</svg>

Este exemplo mostra um <svg> com o grupo de componentes width500 e height definido como100. viewBox definido como 0 0 50 50. Isso resultará na proporção de largura e altura do eixo x sendo500/50 = 10, a proporção de largura e altura do eixo y é100/50 =2. O raio do círculo na imagem é25, tornando sua largura50 graus de largura, altura50 unidades. Portanto, ela preencherá toda a caixa de visualização (ViewBox) (não a janela de visualização (Viewport)).

Quando o símbolo meet é usado, a caixa de visualização (ViewBox) será ajustada conforme o eixo y, porque sua proporção de largura e altura é menor. Isso significa que a caixa de visualização (ViewBox) preencherá toda a janela de visualização (Viewport) ao longo do eixo y (verticalmente), mas apenas ao longo do eixo x (horizontalmente)2 * 50 pixels = 100 pixels (proporção*Tamanho X da caixa de visualização (ViewBox) ). Devido à largura da janela de visualização (Viewport) ser500 pixels, portanto, você deve especificar como alinhar horizontalmente a caixa de visualização (ViewBox) dentro da janela de visualização (Viewport). Isso é feito usando xMin, xMid e xMax na primeira parte da subpartida preserveAspectRatio propriedade valores.

Aqui há três imagens que representam o uso de xMinYMin meet, xMidYmin meet e xMaxYmin meet na propriedade preservarRelaçãoDeAspecto. Observe como a caixa de visualização se alinha com a esquerda, o centro e a direita (dependendo da configuração).

Da mesma forma, se a proporção de largura e altura da imagem ao longo do eixo x for menor que ao longo do eixo y, é necessário especificar seu alinhamento y.

Este é um exemplo anterior, mas agora com width100 e height200:

O tamanho da caixa de visualização (ViewBox) é o mesmo, portanto, a proporção de largura e altura ao longo do eixo y (200/50 = 4）é maior que a proporção de largura e altura ao longo do eixo x (100/50 = 2Portanto, a caixa de visualização (ViewBox) será preenchida na direção do eixo x em vez do eixo y. Isso torna necessário especificar o alinhamento y da caixa de visualização (ViewBox).

<svg width="100" height="200" viewbox="0 0　50　50" preservarRelaçãoDeAspecto="xMinYMin meet" estilo="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preservarRelaçãoDeAspecto="xMinYMid meet" estilo="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMax meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

São três imagens, cada uma mostrando uma possível alinhamento Y usando o valor do sub-parte: YMin, YMid e YMax: