Solución:
El escalado en svg se realiza con viewBox, que combina escalado y desplazamiento. Hay un buen artículo sobre cómo escalar SVG. Del siguiente artículo:
Si piensa en el documento como un lienzo, el cuadro de vista es parte del lienzo que desea que vea el espectador.
Es como una pantalla de su teléfono celular en la aplicación de la cámara que muestra parte de la escena que se observa con una escala y compensaciones específicas.
Aquí se puede encontrar una buena muestra que demuestra lo que es viewBox.
Un poco de matemáticas e implementé acercar / alejar con la rueda del mouse. Además, se agregó el desplazamiento panorámico con mousemove y el valor de la escala de visualización. Un ejemplo que demuestra cómo se puede utilizar viewBox:
const svgImage = document.getElementById("svgImage");
const svgContainer = document.getElementById("svgContainer");
var viewBox = x:0,y:0,w:svgImage.clientWidth,h:svgImage.clientHeight;
svgImage.setAttribute('viewBox', `$viewBox.x $viewBox.y $viewBox.w $viewBox.h`);
const svgSize = w:svgImage.clientWidth,h:svgImage.clientHeight;
var isPanning = false;
var startPoint = x:0,y:0;
var endPoint = x:0,y:0;;
var scale = 1;
svgContainer.onmousewheel = function(e)
e.preventDefault();
var w = viewBox.w;
var h = viewBox.h;
var mx = e.offsetX;//mouse x
var my = e.offsetY;
var dw = w*Math.sign(e.deltaY)*0.05;
var dh = h*Math.sign(e.deltaY)*0.05;
var dx = dw*mx/svgSize.w;
var dy = dh*my/svgSize.h;
viewBox = x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w-dw,h:viewBox.h-dh;
scale = svgSize.w/viewBox.w;
zoomValue.innerText = `$Math.round(scale*100)/100`;
svgImage.setAttribute('viewBox', `$viewBox.x $viewBox.y $viewBox.w $viewBox.h`);
svgContainer.onmousedown = function(e)
isPanning = true;
startPoint = x:e.x,y:e.y;
svgContainer.onmousemove = function(e)
if (isPanning)
endPoint = x:e.x,y:e.y;
var dx = (startPoint.x - endPoint.x)/scale;
var dy = (startPoint.y - endPoint.y)/scale;
var movedViewBox = x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h;
svgImage.setAttribute('viewBox', `$movedViewBox.x $movedViewBox.y $movedViewBox.w $movedViewBox.h`);
svgContainer.onmouseup = function(e)
if (isPanning)
endPoint = x:e.x,y:e.y;
var dx = (startPoint.x - endPoint.x)/scale;
var dy = (startPoint.y - endPoint.y)/scale;
viewBox = x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h;
svgImage.setAttribute('viewBox', `$viewBox.x $viewBox.y $viewBox.w $viewBox.h`);
isPanning = false;
svgContainer.onmouseleave = function(e)
isPanning = false;
1
Matemáticas:
Simplemente puede usar css transform para escalar el svg. Establecer el CSStransform-origin desde donde desea “fijar” el origen del zoom y utilizar scale(x) en transform como en el ejemplo anterior que usa un elemento de entrada de rango con un valor mínimo para 1 y máximo a 200 para escalar desde 1% para 200%:
const slider = document.getElementById("zoomRange");
const zvgZoom = document.getElementById("svgZoom");
const zoomValue = document.getElementById("zoomValue");
slider.oninput = function()
//console.log('zoom', this.value / 100);
zoomValue.innerText = `$this.value%`;
zvgZoom.style.transform = `scale($this.value / 100)`;
#svgContainer
background-color: #dedede;
#svgZoom
transform-origin: 0% 0%;
100%
El zoom y la panorámica son técnicas comunes y útiles en la visualización de datos, que funcionan particularmente bien con la visualización basada en SVG, ya que los gráficos vectoriales no sufren pixelación como lo haría su contraparte de mapa de bits.
Esta respuesta explora el soporte integrado de D3 para hacer zoom y paneo, por el libro de Nick Qi Zhu Visualización de datos con el libro de cocina D3.js (2013).
Empiece por abrir su copia local del siguiente archivo en su navegador web:
https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter10/zoom.html.
En esta receta, implementaremos el zoom y la panorámica geométricos utilizando el soporte de zoom D3. Veamos cómo se hace esto en código:
Esta receta genera el siguiente efecto de zoom y panorámica:
Original:
Zoom:
Sartén:
Notará que el zoom y la panorámica reaccionan perfectamente bien tanto a la rueda del mouse como al gesto multitáctil (en oposición a las otras respuestas). La mayor parte del trabajo pesado lo realiza la biblioteca D3, por lo que necesitábamos poco código.
Aquí tienes las reseñas y calificaciones
Recuerda que puedes difundir esta reseña si te valió la pena.