Caixas delimitadoras SVG: meça as coordenadas certas

Use getBBox() quando precisar dos limites de um elemento SVG em suas próprias coordenadas de usuário. Use getBoundingClientRect() quando precisar de um retângulo em pixels CSS relativo à viewport do navegador. Antes de copiar qualquer resultado para uma sobreposição ou um viewBox, confira qual sistema de coordenadas o destino usa.

Um emblema rotacionado pode ter uma pequena caixa local e uma caixa alinhada à tela muito maior. Ambas as medições podem ser válidas. Nenhuma deve ser tratada como um retângulo universal ao redor de todos os pixels pintados, especialmente quando houver contornos, marcadores, recorte ou filtros.

Escolha a medição para o destino

A documentação de getBBox() do MDN descreve limites geométricos locais e os controles opcionais de contorno, marcadores e recorte. A transformação do próprio elemento medido e as de seus ancestrais não são incluídas nesse resultado local. Os descendentes de um grupo ainda contribuem para sua geometria, incluindo seu posicionamento dentro dele.

A referência de getBoundingClientRect() do MDN descreve coordenadas relativas à viewport. A rolagem muda essa relação de coordenadas. Esses valores em pixels CSS não são automaticamente unidades de usuário SVG nem dimensões físicas de impressão.

Meça um emblema original transformado

Este exemplo contém um anel verde-petróleo com uma abertura retangular e um triângulo dourado separado. Ambos têm contorno grosso com junções arredondadas. O grupo é transladado, rotacionado e escalado.

<svg id="scene" width="600" height="300" viewBox="0 0 300 150"
     xmlns="http://www.w3.org/2000/svg" style="overflow:visible">
  <g id="art" transform="translate(100 35) rotate(25) scale(1.2)"
     stroke="#17364c" stroke-width="10" stroke-linejoin="round">
    <path fill="#147d78" fill-rule="evenodd"
          d="M0 0H80V60H0Z M20 20H60V40H20Z" />
    <path fill="#e5a340" d="M100 50L120 10L140 50Z" />
  </g>
</svg>
<script>
  const art = document.querySelector("#art");
  const local = art.getBBox();
  const screen = art.getBoundingClientRect();
</script>

As coordenadas locais vão de 0 a 140 na horizontal e de 0 a 60 na vertical. A abertura afeta o interior da forma, mas não reduz esses limites externos.

Abrimos essa geometria no Chrome e a medimos com um pequeno ambiente de teste. Com exibição de 600 × 300 pixels CSS, getBBox() retornou x=0, y=0, width=140, height=60. O retângulo do cliente foi de aproximadamente 365.376 × 272.508 pixels CSS. Sua posição na tela dependia de onde o SVG estava na página.

Após mudar o tamanho de exibição para 300 × 150, a caixa local permaneceu 140 × 60. O retângulo do cliente passou a aproximadamente 182.688 × 136.254, metade das dimensões anteriores. A geometria de origem não mudou; seu mapeamento para a página, sim.

Esses números descrevem este exemplo no navegador testado. Não são uma comparação de mecanismos de navegador nem uma especificação da caixa de seleção de todos os editores.

Desenhe cada contorno em seu próprio sistema de coordenadas

Para um contorno local, use as coordenadas retornadas e a mesma transformação do grupo medido. Insira-o como irmão para que não se torne parte da próxima medição:

const scene = document.querySelector("#scene");
const box = art.getBBox();
const outline = document.createElementNS("http://www.w3.org/2000/svg", "rect");
for (const key of ["x", "y", "width", "height"]) {
  outline.setAttribute(key, box[key]);
}
outline.setAttribute("transform", art.getAttribute("transform"));
outline.setAttribute("fill", "none");
outline.setAttribute("stroke", "olive");
scene.append(outline);

Essa cópia direta da transformação é adequada para este exemplo porque a arte e o contorno compartilham o mesmo pai. Um retângulo inserido em outro lugar precisa de um mapeamento de matriz entre os dois sistemas de coordenadas.

Para um contorno HTML, coloque um div diretamente sob body, com posicionamento fixo e sem um ancestral contêiner transformado:

const box = art.getBoundingClientRect();
Object.assign(overlay.style, {
  position: "fixed",
  boxSizing: "border-box",
  pointerEvents: "none",
  border: "2px dashed coral",
  left: `${box.x}px`,
  top: `${box.y}px`,
  width: `${box.width}px`,
  height: `${box.height}px`,
});

Aqui, overlay é seu elemento de contorno existente. Meça novamente ao rolar, redimensionar ou mudar o layout ou a transformação da arte. Se usar posicionamento no documento, considere os deslocamentos de rolagem; se usar um contêiner posicionado, considere o sistema de coordenadas desse contêiner. Misturar essas regras de posicionamento é uma causa comum de um retângulo correto aparecer deslocado.

Nosso ambiente de teste exibiu os dois contornos. O retângulo local inclinou junto do anel e do triângulo, enquanto o retângulo HTML tracejado permaneceu horizontal e vertical. O contorno grosso se estendeu além de partes dos contornos geométricos.

Teste opções de contorno em vez de presumir suporte

A caixa local padrão exclui a largura do contorno. O MDN documenta getBBox({ stroke: true }), mas o parâmetro de opções tem considerações de compatibilidade separadas do método sem argumentos há muito estabelecido.

Em nosso exemplo no Chrome, passar { stroke: true } retornou a mesma caixa de 140 × 60 da chamada sem argumentos. Remover o contorno de 10 unidades também deixou o retângulo do cliente igual. A borda escura visível claramente mudou, portanto nenhum dos resultados desse teste representou toda a área pintada.

Uma chamada que aceita um objeto de opções sem lançar erro não basta para provar que respeitou a opção. Teste uma forma conhecida com contorno e confira as dimensões retornadas no navegador de destino. Use as definições de caixas delimitadoras SVG para distinguir limites de objeto, contorno e decoração.

Não generalize uma regra de margem de meio contorno para toda forma. Junções miter, marcadores, contornos sem escala, sombras e filtros podem se estender de formas diferentes. Para um exemplo simples com junções arredondadas que você controla, uma margem explícita e inspeção visual podem bastar. Para um recortador automático de exportação, esses casos precisam de tratamento deliberado.

Converta uma caixa local antes de ajustar o viewBox raiz

Nunca cole diretamente x, y, width e height do retângulo do cliente no viewBox SVG. Esses valores incluem o posicionamento na página e usam outro sistema de unidades.

Para este exemplo, mapeie os quatro cantos da caixa local para as coordenadas de usuário da raiz SVG. A referência de getScreenCTM() do MDN descreve a matriz usada para mapear coordenadas SVG em direção à viewport do documento. Combinar a matriz da arte com a matriz inversa da raiz remove esse mapeamento compartilhado de tela:

const box = art.getBBox();
const rootMatrix = scene.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error("SVG is not measurable");
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const corners = [
  [box.x, box.y],
  [box.x + box.width, box.y],
  [box.x + box.width, box.y + box.height],
  [box.x, box.y + box.height],
].map(([x, y]) => new DOMPoint(x, y).matrixTransform(toRoot));
 
const xs = corners.map(p => p.x);
const ys = corners.map(p => p.y);
const x = Math.min(...xs);
const y = Math.min(...ys);
const width = Math.max(...xs) - x;
const height = Math.max(...ys) - y;
const padding = 12; // Chosen for this simple fixture, in root user units.
scene.setAttribute("viewBox", [
  x - padding, y - padding,
  width + 2 * padding, height + 2 * padding,
].join(" "));

Isso presume um SVG renderizado com transformações bidimensionais invertíveis. Mapear os cantos de um retângulo local produz um envelope conservador alinhado aos eixos, não necessariamente a caixa mais justa possível ao redor de cada curva transformada.

O ambiente de teste produziu um viewBox de aproximadamente 57.571 23 206.688 160.254 com essa margem. Inspecionamos o resultado, e o contorno arredondado do exemplo permaneceu dentro da área de exibição. A exibição larga ainda tinha espaço lateral porque o viewBox ajustado tinha outra proporção; ajustar não implica distorcer.

Se você precisar de um pivô em vez de um recorte, o guia de transform-origin explica como caixas de referência afetam a rotação. Para dimensões físicas de importação, use o fluxo de solução de problemas de tamanho SVG.

Meça a geometria que você pretende editar

Se sua imagem original existe apenas como PNG ou JPG e você precisa de formas editáveis, o PerfectVector pode recuperar um SVG antes da medição. Inspecione seus traçados, aberturas, contornos e qualquer conteúdo raster mantido. Uma caixa delimitadora informa onde a geometria se estende; não prova que o traçado seja preciso nem que todo detalhe visível seja editável.

Um SVG existente pode ser medido diretamente. O guia de edição SVG ajuda a identificar o que você realmente tem, enquanto a visão geral da vetorização de imagens explica a etapa anterior de conversão.

Para arte apenas raster, experimente sua imagem original no PerfectVector, inspecione os contornos recuperados e meça o grupo que você posicionará ou exportará. Mantenha uma margem e confira as bordas visíveis finais antes de tratar o resultado como recorte de entrega.

Perguntas frequentes

Por que os dois métodos retornam larguras diferentes? Eles usam sistemas de coordenadas diferentes. A caixa SVG local descreve geometria em unidades de usuário, enquanto o retângulo do cliente descreve seus limites relativos à viewport em pixels CSS após o mapeamento da página. Escala e rotação podem mudar essas dimensões.

Uma caixa delimitadora informa se a arte tem uma abertura? Não. Um retângulo registra limites externos, não a topologia interna. Um retângulo sólido e um anel com as mesmas bordas externas podem ter a mesma caixa delimitadora. Inspecione os traçados e as regras de preenchimento para conferir aberturas.

Posso usar o retângulo do cliente como viewBox? Não diretamente. Converta primeiro a geometria relevante para as coordenadas de usuário da raiz SVG. Posição de tela e dimensões em pixels CSS não devem ser copiadas para um retângulo de coordenadas de origem.

Fontes

1. MDN getBBox — Define limites SVG locais e controles opcionais de medição.
2. MDN getBoundingClientRect — Explica retângulos relativos à viewport e rolagem.
3. Definições de caixas delimitadoras SVG — Distingue limites geométricos de objeto, contorno e decoração.
4. MDN getScreenCTM — Documenta a matriz usada para conectar coordenadas SVG e de viewport.