我对 css、html 还很陌生。目前我遇到了一个问题，放大时无法到达顶部或左侧，缩小时看起来从未发生过这种情况
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Viewer</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
display: flex;
height: 100%;
overflow: hidden; /* Agregado para ocultar el desbordamiento de los botones */
}
#svg-container {
flex: 1;
overflow: auto;
padding: 10px;
}
svg {
max-width: 100%;
max-height: 100%;
display: block;
}
.zoom-btn {
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
z-index: 1; /* Asegura que los botones estén por encima del SVG */
}
</style>
</head>
<body>
<div id="container">
<div id="svg-container">
<svg id="my-svg" version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 1049 744" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0,744) scale(0.1,-0.1)" fill="#000000" stroke="none">
<path d="M8699 7344 c-10 -11 -42 -61 -73 -112 -613 -1016 -1784 -2032 -3386
-2939 -269 -152 -537 -294 -650 -343 -352 -155 -1199 -468 -2245 -832 -443
-154 -920 -317 -947 -323 -14 -4 -33 -14 -41 -23 -14 -15 -1280 -2382 -1293
-2417 -3 -8 5 -25 18 -38 23 -23 29 -24 194 -26 170 -1 1458 -25 1954 -36 146
-3 732 -15 1303 -25 2689 -51 3130 -60 3382 -65 149 -3 614 -12 1035 -20 913
-17 1199 -23 1800 -35 250 -6 503 -10 562 -10 105 0 108 1 125 26 19 29 46
-199 -272 2284 -30 239 -125 982 -211 1650 -85 668 -164 1278 -174 1355 l-18
140 143 795 c79 437 149 824 155 859 11 59 10 65 -10 86 -25 27 -73 31 -455
40 -126 3 -288 7 -360 10 -503 18 -519 18 -536 -1z m696 -110 c303 -9 552 -18
554 -20 1 -1 -61 -355 -139 -786 -79 -431 -145 -810 -147 -843 -3 -38 16 -217
51 -490 52 -406 113 -878 226 -1765 27 -212 81 -635 120 -940 39 -305 118
-919 175 -1365 57 -445 101 -812 99 -814 -4 -4 -1699 24 -2044 34 -91 3 -304
7 -475 10 -414 7 -1257 23 -1585 30 -146 3 -618 12 -1050 20 -741 14 -954 18
-1555 31 -137 2 -961 18 -1830 35 -868 16 -1581 32 -1583 34 -2 2 5 19 16 37
11 18 277 517 592 1108 315 591 583 1091 595 1111 13 20 35 39 49 43 123 31
1895 655 2451 864 559 209 756 294 1053 453 1750 938 3074 2047 3732 3127 l63
102 41 0 c22 0 289 -7 591 -16z"/>
<path id="destino" d="M9470 7005 l0 -165 150 0 150 0 0 165 0 165 -150 0 -150 0 0 -165z
m250 0 l0 -115 -100 0 -100 0 0 115 0 115 100 0 100 0 0 -115z"/>
<g id="punto-destino">
<circle cx="9470" cy="7005" r="100" fill="red" />
</g>
<path id="camino_abajo" d="M9305 6478 c-3 -7 -25 -1225 -50 -2707 -24 -1482 -46 -2696 -48
-2698 -2 -2 -1731 31 -3841 72 -2111 41 -3842 73 -3847 70 -12 -8 -12 -32 0
-39 5 -3 1736 -40 3846 -81 2111 -41 3848 -78 3860 -81 13 -3 25 -1 29 4 8 13
98 5451 91 5463 -9 13 -35 11 -40 -3z"/>
<path id="camino_arriba" d="M8845 6458 c-3 -7 -43 -1088 -90 -2402 -46 -1313 -86 -2390 -88
-2392 -1 -2 -1594 28 -3538 66 -1943 38 -3544 70 -3557 70 -24 0 -41 -25 -26
-40 11 -11 7160 -154 7176 -144 5 3 7 16 4 27 -3 11 33 1097 80 2411 46 1315
82 2397 79 2404 -2 6 -11 12 -20 12 -9 0 -18 -6 -20 -12z"/>
<path id="entrada" d="M710 870 l0 -120 310 0 310 0 0 120 0 120 -310 0 -310 0 0 -120z
m570 0 l0 -70 -260 0 -260 0 0 70 0 70 260 0 260 0 0 -70z"/>
<g id="punto-entrada">
<circle cx="710" cy="870" r="100" fill="red" />
</g>
<polyline id="ruta" fill="none" stroke="red" stroke-width="2"/>
</g>
</svg>
</div>
<div id="nav">
<button class="zoom-btn" id="zoom-in">+</button>
<button class="zoom-btn" id="zoom-out">-</button>
</div>
</div>
<script>
var zoomInBtn = document.getElementById('zoom-in');
var zoomOutBtn = document.getElementById('zoom-out');
var puntoEntrada = document.getElementById('punto-entrada');
var puntoDestino = document.getElementById('punto-destino');
var ruta = document.getElementById('ruta');
var svg = document.getElementById('my-svg');
var scale = 1;
zoomInBtn.addEventListener('click', function() {
scale *= 1.2;
updateView();
});
zoomOutBtn.addEventListener('click', function() {
scale *= 0.8;
updateView();
});
function updateView() {
svg.style.transform = 'scale(' + scale + ')';
}
// Calcular la ruta desde la entrada hasta el destino
function calcularRuta() {
debugger;
// Obtener coordenadas de los puntos de entrada y destino
var entradaX = puntoEntrada.getAttributeNS(null, 'cx');
var entradaY = puntoEntrada.getAttribute('cy');
var destinoX = puntoDestino.getAttribute('cx');
var destinoY = puntoDestino.getAttribute('cy');
// Establecer las coordenadas de los puntos de la ruta
ruta.setAttribute('x1', entradaX);
ruta.setAttribute('y1', entradaY);
ruta.setAttribute('x2', destinoX);
ruta.setAttribute('y2', destinoY);
}
// Calcular la ruta al cargar la página
window.onload = function() {
calcularRuta();
};
</script>
</body>
</html>
我已经尝试编辑一些属性，但不起作用。我不太确定为什么会发生这种情况，并且非常感谢任何帮助。抱歉英语不好。
为了解决这个问题，您需要在放大或缩小时动态调整 SVG 内容在其容器内的缩放和位置。目前，您仅对 SVG 元素本身应用缩放变换，但您还需要调整容器的滚动位置以保持缩放内容可见。
以下是如何更改 updateView() 函数来实现此目的：
function updateView() {
svg.style.transform = 'scale(' + scale + ')';
// Adjust container scroll position
var rect = svg.getBoundingClientRect();
var scrollLeft = (rect.width * scale - rect.width) / 2;
var scrollTop = (rect.height * scale - rect.height) / 2;
svg.parentElement.scrollLeft = scrollLeft;
svg.parentElement.scrollTop = scrollTop;
}
此代码计算容器需要水平和垂直滚动的量，以保持缩放的内容居中且可见，然后相应地调整容器的scrollLeft和scrollTop。