Como manter o viewBox centralizado ao “aplicar zoom” em SVGs?

Question

Aug 18, 2017, 07:59 PM

Como manter o viewBox centralizado ao “aplicar zoom” em SVGs?

Muitas vezes eu uso oviewBox atributo para "ampliar" um elemento SVG. É claro que o zoom é realizado usando aslargura ealtura valores para oviewBox atributo - mas ox ey é difícil descobrir valores para manter a cena centralizada.

Abaixo está um trecho em queviewBox="0 0 100 100". (x y largura altura) Este é o meu ponto de partida. A cena está em escala e começa no canto superior esquerdo.

<head>
  <link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>

<body> 
  <iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
          id="grid"
  ></iframe>

  <div class="wrp">   
  
    <!-- SVG relevant code below-->
    <svg xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 100 100"
         width="100" height="100"
         class="canvas"
    > 
      <defs>   
        <style type="text/css"> 

          circle {
            fill: #0ff;
            fill-opacity: 0.25;
            stroke-width: 0.25;
            stroke: #0ee;
          }

        </style>       
      </defs>

      <circle cx="37.5" cy="50" r="25" />
      <circle cx="62.5" cy="50" r="25" />
      <circle cx="50" cy="71.65" r="25" />    
    </svg>
    
  </div>
</body>

(Visível na página inteira. Os snippets são responsivos)

Ampliando

Alterando alargura ealtura valores para50 noviewBox amplia a cena. No entanto, eu tive que ajustar ox ey valores tanto para metade doviewBox dimensões:25 para manter o desenho centralizado.

viewBox="25 25 50 50"

<head>
  <link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>

<body> 
  <iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
          id="grid"
  ></iframe>

  <div class="wrp">   
  
    <!-- SVG relevant code below-->
    <svg xmlns="http://www.w3.org/2000/svg"
         viewBox="25 25 50 50"
         width="100" height="100"
         class="canvas"
    > 
      <defs>   
        <style type="text/css"> 

          circle {
            fill: #0ff;
            fill-opacity: 0.25;
            stroke-width: 0.25;
            stroke: #0ee;
          }

        </style>       
      </defs>

      <circle cx="37.5" cy="50" r="25" />
      <circle cx="62.5" cy="50" r="25" />
      <circle cx="50" cy="71.65" r="25" />    
    </svg>
    
  </div>
</body>

Reduzir pela metade a largura e a altura não é consistente

Seguindo o padrão de reduzir pela metadelargura ealtura para centralizar a cena:

viewBox="12.5 12.5 25 25" deve continuar o zoom e manter o centro. Mas não fica centrado. Minha pergunta é qual fórmula ou técnica o SVG usa e que eu sempre consigo descobrir matematicamente o quex ey valor que eu preciso para centrar um específicolargura ealtura valor noviewBox?

Nota: conheço bibliotecas comoSnap.svg eRaphaël. Estou evitando bibliotecas em um esforço para entender os fundamentos.

Mais uma coisa: estou perguntando se você já tem umlargura ealtura valor noviewBox como você encontra as coordenadas centrais da cena. Não o contrário.

Folhas de estilo externas foram incluídas para cognição visual. O único código relevante para esta pergunta é referente aos elementos SVG.