web-frontend 相关问题

我对 css、html 还很陌生。目前我遇到了一个问题，放大时无法到达顶部或左侧，缩小时看起来从未发生过这种情况 !DOCTYPE html> 我对 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。

javascript html css frontend web-frontend

回答 1 投票 0

如何删除html原生对话框的宽度

我想在小屏幕上以全宽和全高显示对话框。这似乎有效。然而，当我尝试在较大的屏幕中删除宽度和高度（通过使用未设置、自动或初始）时，它

html css web-frontend

回答 1 投票 0

将 tailwind 和外部 CSS 转换为内联样式

我正在使用顺风类以及外部样式表中定义的自定义类。我需要将代码转换为内联样式以便在其他地方使用。我怎样才能做到这一点？ HTML：我正在使用顺风类以及外部样式表中定义的自定义类。我需要将代码转换为内联样式以便在其他地方使用。我该怎么做？ HTML： <div class="lg:w-1/4 w-full h-auto px-4 py-2 bg-orange border-2 shadow-lg border-orange rounded-2xl flex gap-2 items-center"> <img src="/Icons/illustration_no-payment.svg" alt="illustration_no-payment"> <div class="h-auto flex flex-col justify-between"> <h3 class="text-mont text-sm text-lblack font-bold">Oh no, your Payment Failed!</h3> <p class="text-mont text-xs text-l2black">Please contact us directly so we can put this right without delay. We appreciate your patience.</p> </div> </div> CSS： .text-lblack { color: #1d1d1d; } .border-orange { border-color: #fd4949; } .text-l2black { color: #444445; } 我正在寻找相同的答案，我想将我的反应组件的 tailwindcss 转换为内联样式以达到某种目的。你有解决这个问题吗

html css frontend web-frontend

回答 1 投票 0

同时旋转和移动球的 CSS 动画

我有一个简单的 React 应用程序，其中的 div 包含 SVG 球图像。将鼠标悬停在图像上时，我希望它能够同时平滑地旋转和向左移动。当悬停状态为 false 时，我希望它腐烂...

css web-frontend react-animations

回答 3 投票 0

react：功能组件内部的方法无法获取useState变量的最新值

我有以下代码：从“preact/hooks”导入{ useState，useEffect }；导出函数 App() { const [pageContent, setPageContent] = useState(""); useEffect(()...

javascript reactjs web-frontend

回答 1 投票 0

web-frontend 相关问题

最新问题