¿Cómo mantener centrado viewBox al "hacer zoom" en SVG?

Question

Aug 18, 2017, 07:59 PM

¿Cómo mantener centrado viewBox al "hacer zoom" en SVG?

A menudo uso elviewBox atribuir a "acercar" un elemento SVG. Zoom se logra, por supuesto, mediante el uso de menoranchura yaltura valores para elviewBox atributo - pero elx yy Los valores son difíciles de entender para mantener la escena centrada.

Debajo hay un fragmento dondeviewBox="0 0 100 100". (x y ancho alto) Este es mi punto de partida. La escena es a escala y comienza en la esquina superior izquierda.

<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>

(Se puede ver en la página completa. Los fragmentos responden)

Zoom en

Cambiando elanchura yaltura valores a50 en elviewBox amplía la escena Sin embargo tuve que ajustar elx yy valores tanto a la mitad deviewBox dimensiones:25 para mantener el dibujo centrado.

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>

Reducir a la mitad el ancho y la altura no es consistente

Siguiendo el patrón de reducir a la mitad elanchura yaltura para centrar la escena:

viewBox="12.5 12.5 25 25" debería continuar el zoom y permanecer centrado. Pero no se queda centrado. Mi pregunta es qué fórmula o técnica usa SVG que siempre puedo averiguar matemáticamente quéx yy valor necesito centrar un específicoanchura yaltura valor en elviewBox?

Nota: conozco bibliotecas comoSnap.svg yRaphaël. Estoy evitando las bibliotecas en un esfuerzo por comprender los fundamentos.

Una cosa más: te pregunto si ya tienes unanchura yaltura valor en elviewBox ¿Cómo se encuentran las coordenadas centrales de la escena? No viceversa.

Se incluyeron hojas de estilo externas para la cognición visual. El único código relevante para esta pregunta pertenece a los elementos SVG.