SVG鼠标漫游
鼠标漫游
鼠标漫游就是通过移动光标和滚轮，完成画布缩放、移动的交互过程。
svg 绘图使用原点在左上角的坐标系统，一个单位代表一像素。这里的像素不能简单理解为屏幕像素，是一个用户单位。svg 的 width 和 height 属性决定图像在用户系统的占位。viewBox 属性则决定占位视口映射到 svg 图像范围的映射。
调整 viewBox 即可完成图像内容的缩放和移动：
- x 增加，视口向右移动，图像内容看起来向左移动；
- y 增加，视口向下移动，图像内容看起来向上移动；
- viewWidth 和 viewHeight 增加，视口变大，图像内容看起来缩小；
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标漫游</title></head><body><p>SvgRoam</p><svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 80 80" fill="none"><pathd="M40 70.4762C56.8315 70.4762 70.4762 56.8315 70.4762 40C70.4762 23.1685 56.8315 9.52381 40 9.52381C23.1685 9.52381 9.5238 23.1685 9.5238 40C9.5238 56.8315 23.1685 70.4762 40 70.4762Z"fill="url(#paint0_radial)" /><path opacity="0.5"d="M40 70.4762C56.8315 70.4762 70.4762 56.8315 70.4762 40C70.4762 23.1685 56.8315 9.52381 40 9.52381C23.1685 9.52381 9.5238 23.1685 9.5238 40C9.5238 56.8315 23.1685 70.4762 40 70.4762Z"fill="url(#paint1_radial)" /><path opacity="0.24"d="M40 70.4762C56.8315 70.4762 70.4762 56.8315 70.4762 40C70.4762 23.1685 56.8315 9.52381 40 9.52381C23.1685 9.52381 9.5238 23.1685 9.5238 40C9.5238 56.8315 23.1685 70.4762 40 70.4762Z"fill="url(#paint2_radial)" /><pathd="M33.2953 24.2094C33.2953 22.9903 31.981 22.2284 29.6953 22.2284C27.7715 22.2284 23.5239 23.2951 20.6096 27.0475C20.0763 27.7332 20.8953 28.1141 21.4286 27.676C23.2191 26.1522 28.0382 24.1903 31.7905 24.6094C33.2953 24.7617 33.2953 24.2094 33.2953 24.2094Z"fill="url(#paint3_linear)" /><pathd="M30.0569 39.0094C31.6769 39.0094 32.9902 37.0224 32.9902 34.5713C32.9902 32.1202 31.6769 30.1332 30.0569 30.1332C28.4368 30.1332 27.1235 32.1202 27.1235 34.5713C27.1235 37.0224 28.4368 39.0094 30.0569 39.0094Z"fill="url(#paint4_radial)" /><pathd="M30.0569 31.6379C31.314 31.6379 32.4188 32.7427 32.9902 34.3617C32.9521 31.9617 31.6569 30.0379 30.0569 30.0379C28.4569 30.0379 27.1616 31.9617 27.1235 34.3617C27.695 32.7427 28.7807 31.6379 30.0569 31.6379Z"fill="url(#paint5_linear)" /><pathd="M46.7046 24.2094C46.7046 22.9903 48.0189 22.2284 50.3046 22.2284C52.2284 22.2284 56.476 23.2951 59.3903 27.0475C59.9236 27.7332 59.1046 28.1141 58.5713 27.676C56.7808 26.1522 51.9617 24.1903 48.2094 24.6094C46.7046 24.7617 46.7046 24.2094 46.7046 24.2094Z"fill="url(#paint6_linear)" /><pathd="M49.943 39.0094C51.563 39.0094 52.8763 37.0224 52.8763 34.5713C52.8763 32.1202 51.563 30.1332 49.943 30.1332C48.3229 30.1332 47.0096 32.1202 47.0096 34.5713C47.0096 37.0224 48.3229 39.0094 49.943 39.0094Z"fill="url(#paint7_radial)" /><pathd="M49.943 31.6379C48.6858 31.6379 47.5811 32.7427 47.0096 34.3617C47.0477 31.9617 48.343 30.0379 49.943 30.0379C51.543 30.0379 52.8382 31.9617 52.8763 34.3617C52.3049 32.7427 51.2192 31.6379 49.943 31.6379Z"fill="url(#paint8_linear)" /><g opacity="0.5"><path opacity="0.5"d="M57.3525 60.1715C59.9239 56.2667 60.2096 51.0857 60.2096 45.9429C60.2096 44.5143 58.9906 42.5334 56.743 42.9715C53.543 43.6 48.0573 44.4762 40.0001 44.4762C31.943 44.4762 26.4573 43.6 23.2573 42.9715C21.0096 42.5334 19.7906 44.5143 19.7906 45.9429C19.7906 51.0857 20.0763 56.2476 22.6477 60.1715C21.2001 60.4572 19.7906 61.0096 18.5334 61.6381C19.2573 62.3429 20.0001 63.0286 20.7811 63.6572C21.0287 63.5619 21.2763 63.4667 21.5239 63.3905C22.9144 62.9715 24.4382 63.2 25.6001 64.0572C28.6096 66.2857 33.143 67.4476 39.9811 67.4476C46.8192 67.4476 51.3525 66.2857 54.362 64.0572C55.5239 63.2 57.0477 62.9524 58.4382 63.3905C58.6858 63.4667 58.9335 63.5619 59.1811 63.6572C59.962 63.0096 60.7239 62.3429 61.4287 61.6381C60.2096 61.0096 58.8001 60.4572 57.3525 60.1715Z"fill="url(#paint9_linear)" /><g opacity="0.5"><path opacity="0.5"d="M33.2953 24.2094C33.2953 22.9903 31.981 22.2284 29.6953 22.2284C27.7715 22.2284 23.5239 23.2951 20.6096 27.0475C20.0763 27.7332 20.8953 28.1141 21.4286 27.676C23.2191 26.1522 28.0382 24.1903 31.7905 24.6094C33.2953 24.7617 33.2953 24.2094 33.2953 24.2094Z"fill="url(#paint10_radial)" /><path opacity="0.5"d="M30.0569 39.0094C31.6769 39.0094 32.9902 37.0224 32.9902 34.5713C32.9902 32.1202 31.6769 30.1332 30.0569 30.1332C28.4368 30.1332 27.1235 32.1202 27.1235 34.5713C27.1235 37.0224 28.4368 39.0094 30.0569 39.0094Z"fill="url(#paint11_radial)" /><path opacity="0.5"d="M30.0569 31.6379C31.314 31.6379 32.4188 32.7427 32.9902 34.3617C32.9521 31.9617 31.6569 30.0379 30.0569 30.0379C28.4569 30.0379 27.1616 31.9617 27.1235 34.3617C27.695 32.7427 28.7807 31.6379 30.0569 31.6379Z"fill="url(#paint12_radial)" /><path opacity="0.5"d="M46.7046 24.2094C46.7046 22.9903 48.0189 22.2284 50.3046 22.2284C52.2284 22.2284 56.476 23.2951 59.3903 27.0475C59.9236 27.7332 59.1046 28.1141 58.5713 27.676C56.7808 26.1522 51.9617 24.1903 48.2094 24.6094C46.7046 24.7617 46.7046 24.2094 46.7046 24.2094Z"fill="url(#paint13_radial)" /></g><path opacity="0.5"d="M49.943 39.0094C51.563 39.0094 52.8763 37.0224 52.8763 34.5713C52.8763 32.1202 51.563 30.1332 49.943 30.1332C48.3229 30.1332 47.0096 32.1202 47.0096 34.5713C47.0096 37.0224 48.3229 39.0094 49.943 39.0094Z"fill="url(#paint14_radial)" /><path opacity="0.5"d="M49.943 31.6379C48.6858 31.6379 47.5811 32.7427 47.0096 34.3617C47.0477 31.9617 48.343 30.0379 49.943 30.0379C51.543 30.0379 52.8382 31.9617 52.8763 34.3617C52.3049 32.7427 51.2192 31.6379 49.943 31.6379Z"fill="url(#paint15_radial)" /></g><path opacity="0.5"d="M9.65714 43.581C9.5619 42.6476 9.5238 41.7143 9.5238 40.7619C9.5238 40.381 9.5238 40 9.54285 39.619C10.9524 42.4952 16.0952 45.0667 19.9048 45.0667C24.3619 45.0667 26.5143 49.6762 26.5143 49.6762L20.0571 47.6C15.3333 47.6 11.619 45.2 9.65714 43.581Z"fill="url(#paint16_linear)" /><path opacity="0.5"d="M70.343 43.581C70.4192 42.6476 70.4763 41.7143 70.4763 40.7619C70.4763 40.381 70.4763 40 70.4573 39.619C69.0478 42.4952 63.9049 45.0667 60.0954 45.0667C55.6382 45.0667 53.4858 49.6762 53.4858 49.6762L59.943 47.6C64.6668 47.6 68.3811 45.2 70.343 43.581Z"fill="url(#paint17_linear)" /><pathd="M70.3422 42.8191C70.3422 42.8191 70.7994 42.5714 70.8565 40C70.8756 38.9333 70.4565 38.8571 70.4565 38.8571C69.047 41.7333 63.9042 44.3048 60.0946 44.3048C55.6375 44.3048 53.4851 48.9143 53.4851 48.9143L59.9423 46.8381C64.6661 46.8381 68.3803 44.4381 70.3422 42.8191Z"fill="url(#paint18_linear)" /><pathd="M61.8472 61.2382C59.752 60.1716 57.1615 59.2192 54.6853 59.4097L55.3329 61.7525C57.0091 61.524 58.7043 62.0002 60.2472 62.7811C60.9901 62.724 61.8091 62.0763 61.8472 61.2382Z"fill="url(#paint19_linear)" /><pathd="M9.65688 42.8191C9.65688 42.8191 9.19974 42.5714 9.1426 40C9.12355 38.9333 9.5426 38.8571 9.5426 38.8571C10.9521 41.7333 16.095 44.3048 19.9045 44.3048C24.3616 44.3048 26.514 48.9143 26.514 48.9143L20.0569 46.8381C15.3331 46.8381 11.6188 44.4381 9.65688 42.8191Z"fill="url(#paint20_linear)" /><pathd="M18.1519 61.2382C20.2471 60.1716 22.8376 59.2192 25.3138 59.4097L24.6661 61.7525C22.9899 61.524 21.2947 62.0002 19.7519 62.7811C19.009 62.724 18.19 62.0763 18.1519 61.2382Z"fill="url(#paint21_linear)" /><pathd="M39.9997 43.9237C48.0568 43.9237 53.5425 43.0475 56.7425 42.419C58.9902 41.9809 60.2092 43.9618 60.2092 45.3904C60.2092 55.8095 59.0473 66.3237 39.9997 66.3237C20.9521 66.3237 19.7902 55.8095 19.7902 45.3904C19.7902 43.9618 21.0092 41.9809 23.2568 42.419C26.4568 43.0475 31.9425 43.9237 39.9997 43.9237Z"fill="url(#paint22_linear)" /><pathd="M23.8471 44.5716C22.7042 44.3811 21.6756 45.2573 21.6566 46.4192C21.5994 51.524 22.1899 56.5526 25.2947 59.7907C28.1518 62.7621 32.9518 64.2097 39.9994 64.2097C47.0471 64.2097 51.8471 62.7621 54.7042 59.7907C57.809 56.5526 58.3994 51.5049 58.3423 46.4192C58.3232 45.2573 57.2947 44.3811 56.1518 44.5716C52.8756 45.1049 46.3233 46.0192 39.9994 46.0192C33.6756 46.0192 27.1233 45.1049 23.8471 44.5716Z"fill="url(#paint23_linear)" /><pathd="M57.3333 52.2284C53.8286 52.3046 46.781 53.9617 40 53.9617C33.219 53.9617 26.1905 52.3046 22.6667 52.2284C22.4381 52.2284 22.2095 52.2284 22 52.2284C22.0952 52.8379 22.2095 53.4475 22.3429 54.0379C22.8381 54.1713 23.4667 54.2856 24.2095 54.3808C27.2762 54.7998 32.419 56.5332 39.981 56.5332C47.5429 56.5332 52.6857 54.7998 55.7524 54.3808C56.5143 54.2856 57.1238 54.1522 57.619 54.0379C57.7524 53.4475 57.8857 52.857 57.9619 52.2284C57.7905 52.2284 57.5619 52.2284 57.3333 52.2284Z"fill="url(#paint24_linear)" /><pathd="M57.7709 46.781C54.1709 46.8572 46.9518 48.5144 39.9995 48.5144C33.0471 48.5144 25.828 46.8572 22.228 46.781C22.0376 46.781 21.8471 46.781 21.6757 46.781C21.6757 47.1429 21.6757 47.5239 21.6757 47.8858C22.228 47.962 22.9328 48.0382 23.828 48.1715C26.9709 48.5906 32.2661 50.3239 39.9995 50.3239C47.7518 50.3239 53.0471 48.5906 56.1709 48.1715C57.0661 48.0572 57.7709 47.962 58.3233 47.8858C58.3233 47.5239 58.3233 47.1429 58.3233 46.781C58.1518 46.762 57.9614 46.762 57.7709 46.781Z"fill="url(#paint25_linear)" /><pathd="M39.9999 61.8859C45.4094 61.8859 48.9904 60.324 52.5332 59.2001C48.838 59.6954 45.5618 60.6287 39.9999 60.6287C34.457 60.6287 31.1618 59.6954 27.4666 59.2001C31.0094 60.3049 34.5904 61.8859 39.9999 61.8859Z"fill="url(#paint26_linear)" /><defs><radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(34.0049 27.649) scale(36.7656)"><stop stop-color="#FFE030" /><stop offset="1" stop-color="#FFB92E" /></radialGradient><radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(34.0049 27.649) scale(28.9251)"><stop stop-color="#FFEA5F" /><stop offset="1" stop-color="#FFBC47" stop-opacity="0" /></radialGradient><radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(40.8617 57.0746) rotate(0.0063929) scale(28.9251 14.8877)"><stop stop-color="#FF4C00" /><stop offset="0.5454" stop-color="#FF4C00" /><stop offset="0.6351" stop-color="#FF4C00" /><stop offset="0.733" stop-color="#FB4C0B" stop-opacity="0.7318" /><stop offset="0.9021" stop-color="#EF4B27" stop-opacity="0.2683" /><stop offset="1" stop-color="#E74A3A" stop-opacity="0" /></radialGradient><linearGradient id="paint3_linear" x1="26.8699" y1="26.252" x2="26.8699" y2="23.0407"gradientUnits="userSpaceOnUse"><stop offset="0.00132565" stop-color="#3C2200" /><stop offset="1" stop-color="#7A4400" /></linearGradient><radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(29.1607 34.6883) rotate(73.8539) scale(4.30606 2.78595)"><stop offset="0.00132565" stop-color="#7A4400" /><stop offset="1" stop-color="#643800" /></radialGradient><linearGradient id="paint5_linear" x1="30.0508" y1="30.116" x2="30.0508" y2="34.252"gradientUnits="userSpaceOnUse"><stop offset="0.00132565" stop-color="#3C2200" /><stop offset="1" stop-color="#512D00" /></linearGradient><linearGradient id="paint6_linear" x1="53.1322" y1="26.252" x2="53.1322" y2="23.0407"gradientUnits="userSpaceOnUse"><stop offset="0.00132565" stop-color="#3C2200" /><stop offset="1" stop-color="#7A4400" /></linearGradient><radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(49.0621 34.689) rotate(73.8539) scale(4.30606 2.78596)"><stop offset="0.00132565" stop-color="#7A4400" /><stop offset="1" stop-color="#643800" /></radialGradient><linearGradient id="paint8_linear" x1="49.9513" y1="30.116" x2="49.9513" y2="34.252"gradientUnits="userSpaceOnUse"><stop offset="0.00132565" stop-color="#3C2200" /><stop offset="1" stop-color="#512D00" /></linearGradient><linearGradient id="paint9_linear" x1="40.0013" y1="67.7211" x2="40.0013" y2="74.9044"gradientUnits="userSpaceOnUse"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></linearGradient><radialGradient id="paint10_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(26.8699 25.0427) scale(4.96303)"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></radialGradient><radialGradient id="paint11_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(29.1607 34.6883) rotate(73.8539) scale(4.30606 2.78595)"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></radialGradient><radialGradient id="paint12_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(30.0508 32.1982) scale(2.5785)"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></radialGradient><radialGradient id="paint13_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(53.1322 25.0427) scale(4.96303)"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></radialGradient><radialGradient id="paint14_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(49.0621 34.689) rotate(73.8539) scale(4.30606 2.78596)"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></radialGradient><radialGradient id="paint15_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"gradientTransform="translate(49.9513 32.1982) scale(2.5785)"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></radialGradient><linearGradient id="paint16_linear" x1="22.9107" y1="44.6508" x2="5.90596" y2="44.6508"gradientUnits="userSpaceOnUse"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></linearGradient><linearGradient id="paint17_linear" x1="57.1552" y1="44.6507" x2="74.16" y2="44.6507"gradientUnits="userSpaceOnUse"><stop stop-color="#7A4400" stop-opacity="0.5" /><stop offset="0.5833" stop-color="#894D00" stop-opacity="0.2069" /><stop offset="0.995" stop-color="#975500" stop-opacity="0" /></linearGradient><linearGradient id="paint18_linear" x1="70.7356" y1="41.1705" x2="58.3676" y2="46.1845"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="0.5" stop-color="#F4F6F8" /><stop offset="1" stop-color="#CBD4DB" /></linearGradient><linearGradient id="paint19_linear" x1="60.3928" y1="62.6192" x2="56.6187" y2="60.2767"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="0.5" stop-color="#F4F6F8" /><stop offset="1" stop-color="#CBD4DB" /></linearGradient><linearGradient id="paint20_linear" x1="9.26584" y1="41.1705" x2="21.6339" y2="46.1846"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="0.5" stop-color="#F4F6F8" /><stop offset="1" stop-color="#CBD4DB" /></linearGradient><linearGradient id="paint21_linear" x1="19.6086" y1="62.6192" x2="23.3827" y2="60.2767"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="0.5" stop-color="#F4F6F8" /><stop offset="1" stop-color="#CBD4DB" /></linearGradient><linearGradient id="paint22_linear" x1="40.0008" y1="71.594" x2="40.0008" y2="36.9209"gradientUnits="userSpaceOnUse"><stop stop-color="#CBD4DB" /><stop offset="1" stop-color="#F4F6F8" /></linearGradient><linearGradient id="paint23_linear" x1="40.0006" y1="66.5402" x2="40.0006" y2="48.4087"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="1" stop-color="#F4F6F8" /></linearGradient><linearGradient id="paint24_linear" x1="40.0011" y1="56.451" x2="40.0011" y2="54.807"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="1" stop-color="#CBD4DB" stop-opacity="0" /></linearGradient><linearGradient id="paint25_linear" x1="40.0006" y1="50.6418" x2="40.0006" y2="48.3481"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="1" stop-color="#CBD4DB" stop-opacity="0" /></linearGradient><linearGradient id="paint26_linear" x1="40.001" y1="60.8958" x2="40.001" y2="63.9441"gradientUnits="userSpaceOnUse"><stop stop-color="#E7EBEE" /><stop offset="1" stop-color="#CBD4DB" stop-opacity="0" /></linearGradient></defs></svg><script>var __extends = (this && this.__extends) || (function () {var extendStatics = function (d, b) {extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };return extendStatics(d, b);};return function (d, b) {if (typeof b !== "function" && b !== null)throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};})();var __assign = (this && this.__assign) || function () {__assign = Object.assign || function (t) {for (var s, i = 1, n = arguments.length; i < n; i++) {s = arguments[i];for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))t[p] = s[p];}return t;};return __assign.apply(this, arguments);};var Roam = /** @class */ (function () {function Roam(el) {this.draggingContext = null;this.currentScale = 1;this.el = el;this.scaleHandler();this.dragHandler();}Roam.prototype.client2offset = function (clientX, clientY) {var _a = this.el.getBoundingClientRect(), x = _a.x, y = _a.y;return {offsetX: clientX - x,offsetY: clientY - y};};Roam.prototype.scaleHandler = function (step, minSide, maxSide) {var _this = this;if (step === void 0) { step = 0.01; }if (minSide === void 0) { minSide = .1; }if (maxSide === void 0) { maxSide = 5; }this.el.addEventListener('wheel', function (e) {e.preventDefault();var event = e;if (event.deltaY < 0) {if (_this.currentScale >= maxSide) {return;}_this.currentScale = _this.currentScale + step;}else if (event.deltaY > 0) {if (_this.currentScale <= minSide) {return;}_this.currentScale = _this.currentScale - step;}var _a = _this.client2offset(event.clientX, event.clientY), offsetX = _a.offsetX, offsetY = _a.offsetY;var _b = _this.getViewInfo(), oldX = _b.x, oldY = _b.y, oldScale = _b.scale;var x = oldX + offsetX * (oldScale - _this.currentScale);var y = oldY + offsetY * (oldScale - _this.currentScale);var viewInfo = {x: x,y: y,scale: _this.currentScale};_this.setViewInfo(viewInfo);if (_this.draggingContext) {_this.draggingContext = __assign({ point: [offsetX, offsetY] }, viewInfo);}});};Roam.prototype.dragHandler = function () {var _this = this;this.el.addEventListener('mousedown', function (e) {// 防止子元素冒泡导致的 offsetX 参照对象变化var _a = e, clientX = _a.clientX, clientY = _a.clientY;var _b = _this.client2offset(clientX, clientY), offsetX = _b.offsetX, offsetY = _b.offsetY;_this.draggingContext = __assign({ point: [offsetX, offsetY] }, _this.getViewInfo());});window.addEventListener('mouseup', function () {_this.draggingContext = null;});this.el.addEventListener('mousemove', function (e) {if (!_this.draggingContext) {return;}var _a = e, clientX = _a.clientX, clientY = _a.clientY;var _b = _this.client2offset(clientX, clientY), offsetX = _b.offsetX, offsetY = _b.offsetY;var offset = [offsetX - _this.draggingContext.point[0], offsetY - _this.draggingContext.point[1]];var _c = _this.draggingContext, oldX = _c.x, oldY = _c.y, oldScale = _c.scale;var realOffet = [offset[0] * Number(oldScale),offset[1] * Number(oldScale),];_this.setViewInfo({x: oldX - realOffet[0],y: oldY - realOffet[1],scale: _this.currentScale});});};return Roam;}());var SvgRoam = /** @class */ (function (_super) {__extends(SvgRoam, _super);function SvgRoam(el) {var _this = _super.call(this, el) || this;_this.realWidth = 0;_this.realHeight = 0;_this.init();return _this;}SvgRoam.prototype.init = function () {this.realWidth = Number(this.el.getAttribute('width'));this.realHeight = Number(this.el.getAttribute('height'));this.currentScale = this.getViewInfo().scale;};SvgRoam.prototype.getViewInfo = function () {var _a, _b;var _c = (_b = (_a = this.el.getAttribute('viewBox')) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [], strX = _c[0], strY = _c[1], strW = _c[2];return {x: Number(strX),y: Number(strY),scale: Number(strW) / this.realWidth};};SvgRoam.prototype.setViewInfo = function (_a) {var x = _a.x, y = _a.y, scale = _a.scale;this.el.setAttribute('viewBox', x + " " + y + " " + scale * this.realWidth + " " + scale * this.realHeight);};return SvgRoam;}(Roam));var svg = document.querySelector('svg');if (svg) {new SvgRoam(svg);}</script><style>body {background: black;}p {color: #fff;text-align: center;}svg {display: block;margin: 0 auto;background: white;}</style></body></html>JAVASCRIPT
(() => {const svg = document.querySelector<SVGSVGElement>('svg');if (!svg) {return;}const width = Number(svg.getAttribute('width'));const height = Number(svg.getAttribute('height'));const diagonal = Math.sqrt(width * width + height * height);const [x, y, viewWidth, viewHeight] = svg.getAttribute('viewBox').split(' ').map(item => Number(item));let currentDiagonal = Math.sqrt(viewWidth * viewWidth + viewHeight * viewHeight);let draggingContext: {point: [number, number];viewBox: string;}|null = null;svg.addEventListener('wheel', e => {e.preventDefault();if (e.deltaY > 0) {if (currentDiagonal / diagonal >= 5) {return;}currentDiagonal = currentDiagonal + 0.01 * diagonal;}else if (e.deltaY < 0) {if (currentDiagonal / diagonal <= .1) {return;}currentDiagonal = currentDiagonal - 0.01 * diagonal;}const {offsetX, offsetY} = e;const [strX, strY, strW, strH] = svg.getAttribute('viewBox')?.split(' ') ?? [];const w = currentDiagonal * width / diagonal;const h = currentDiagonal * height / diagonal;const x = Number(strX) + offsetX * (Number(strW) - w) / width;const y = Number(strY) + offsetY * (Number(strH) - h) / height;svg.setAttribute('viewBox', `${x} ${y} ${w} ${h}`);if (draggingContext) {draggingContext = {point: [e.offsetX, e.offsetY],viewBox: `${x} ${y} ${w} ${h}`,};}});// 拖动svg.addEventListener('mousedown', e => {draggingContext = {point: [e.offsetX, e.offsetY],viewBox: svg.getAttribute('viewBox') as string,};});window.addEventListener('mouseup', () => {draggingContext = null;});svg.addEventListener('mousemove', e => {if (!draggingContext) {return;}const offset = [e.offsetX - draggingContext.point[0], e.offsetY - draggingContext.point[1]];const [strX, strY, strW, strH] = draggingContext.viewBox.split(' ');const realOffet = [offset[0] * Number(strW) / width,offset[1] * Number(strH) / height,];const x = Number(strX) - realOffet[0];const y = Number(strY) - realOffet[1];svg.setAttribute('viewBox', `${x} ${y} ${strW} ${strH}`);});
})();TYPESCRIPT
interface ViewInfo {scale: number;x: number;y: number;
}abstract class Roam {constructor(el: HTMLElement|SVGSVGElement) {this.el = el;this.scaleHandler();this.dragHandler();}abstract init(): void;el: HTMLElement|SVGSVGElement;draggingContext: ({point: [number, number]}&ViewInfo)|null = null;currentScale = 1;client2offset(clientX: number, clientY: number) {const { x, y } = this.el.getBoundingClientRect();return {offsetX: clientX - x,offsetY: clientY - y,};}scaleHandler(step = 0.01, minSide = .1, maxSide = 5) {this.el.addEventListener('wheel', e => {e.preventDefault();const event = e as WheelEvent;if (event.deltaY < 0) {if (this.currentScale >= maxSide) {return;}this.currentScale = this.currentScale + step;}else if (event.deltaY > 0) {if (this.currentScale <= minSide) {return;}this.currentScale = this.currentScale - step;}const { offsetX, offsetY } = this.client2offset(event.clientX, event.clientY);const { x: oldX, y: oldY, scale: oldScale } = this.getViewInfo();const x = oldX + offsetX * (oldScale - this.currentScale);const y = oldY + offsetY * (oldScale - this.currentScale);const viewInfo = {x,y,scale: this.currentScale,};this.setViewInfo(viewInfo);if (this.draggingContext) {this.draggingContext = {point: [offsetX, offsetY],...viewInfo,};}});}dragHandler() {this.el.addEventListener('mousedown', e => {// 防止子元素冒泡导致的 offsetX 参照对象变化const { clientX, clientY } = e as WheelEvent;const {offsetX, offsetY} = this.client2offset(clientX, clientY);this.draggingContext = {point: [offsetX, offsetY],...this.getViewInfo(),};});window.addEventListener('mouseup', () => {this.draggingContext = null;});this.el.addEventListener('mousemove', e => {if (!this.draggingContext) {return;}const { clientX, clientY } = e as WheelEvent;const {offsetX, offsetY} = this.client2offset(clientX, clientY);const offset = [offsetX - this.draggingContext.point[0], offsetY - this.draggingContext.point[1]];const { x: oldX, y: oldY, scale: oldScale } = this.draggingContext;const realOffet = [offset[0] * Number(oldScale),offset[1] * Number(oldScale),];this.setViewInfo({x: oldX - realOffet[0],y: oldY - realOffet[1],scale: this.currentScale,});});}abstract getViewInfo(): ViewInfo;abstract setViewInfo(params: ViewInfo): void;
}class SvgRoam extends Roam {constructor(el: SVGSVGElement) {super(el);this.init();}realWidth = 0;realHeight = 0;init() {this.realWidth = Number(this.el.getAttribute('width'));this.realHeight = Number(this.el.getAttribute('height'));this.currentScale = this.getViewInfo().scale;}getViewInfo() {const [strX, strY, strW] = this.el.getAttribute('viewBox')?.split(' ') ?? [];return {x: Number(strX),y: Number(strY),scale: Number(strW) / this.realWidth,};}setViewInfo({ x, y, scale }: { x: number; y: number; scale: number; }) {this.el.setAttribute('viewBox', `${x} ${y} ${scale * this.realWidth} ${scale * this.realHeight}`);}
}
const svg = document.querySelector<SVGSVGElement>('svg');
if (svg) {new SvgRoam(svg);
}
TYPESCRIPT => JAVASCRIPT
1. 安装node.js
2. 安装typescript依赖包
npm install -g typescript
3. 转换ts文件为js文件
按住shift键，然后鼠标右键，选择在此处打开Powershell 窗口 输入 tsc xxx.ts 将typescript 转为 javascript
<script>
var __extends = (this && this.__extends) || (function () {var extendStatics = function (d, b) {extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };return extendStatics(d, b);};return function (d, b) {if (typeof b !== "function" && b !== null)throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};})();var __assign = (this && this.__assign) || function () {__assign = Object.assign || function (t) {for (var s, i = 1, n = arguments.length; i < n; i++) {s = arguments[i];for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))t[p] = s[p];}return t;};return __assign.apply(this, arguments);};var Roam = /** @class */ (function () {function Roam(el) {this.draggingContext = null;this.currentScale = 1;this.el = el;this.scaleHandler();this.dragHandler();}Roam.prototype.client2offset = function (clientX, clientY) {var _a = this.el.getBoundingClientRect(), x = _a.x, y = _a.y;return {offsetX: clientX - x,offsetY: clientY - y};};Roam.prototype.scaleHandler = function (step, minSide, maxSide) {var _this = this;if (step === void 0) { step = 0.01; }if (minSide === void 0) { minSide = .1; }if (maxSide === void 0) { maxSide = 5; }this.el.addEventListener('wheel', function (e) {e.preventDefault();var event = e;if (event.deltaY < 0) {if (_this.currentScale >= maxSide) {return;}_this.currentScale = _this.currentScale + step;}else if (event.deltaY > 0) {if (_this.currentScale <= minSide) {return;}_this.currentScale = _this.currentScale - step;}var _a = _this.client2offset(event.clientX, event.clientY), offsetX = _a.offsetX, offsetY = _a.offsetY;var _b = _this.getViewInfo(), oldX = _b.x, oldY = _b.y, oldScale = _b.scale;var x = oldX + offsetX * (oldScale - _this.currentScale);var y = oldY + offsetY * (oldScale - _this.currentScale);var viewInfo = {x: x,y: y,scale: _this.currentScale};_this.setViewInfo(viewInfo);if (_this.draggingContext) {_this.draggingContext = __assign({ point: [offsetX, offsetY] }, viewInfo);}});};Roam.prototype.dragHandler = function () {var _this = this;this.el.addEventListener('mousedown', function (e) {// 防止子元素冒泡导致的 offsetX 参照对象变化var _a = e, clientX = _a.clientX, clientY = _a.clientY;var _b = _this.client2offset(clientX, clientY), offsetX = _b.offsetX, offsetY = _b.offsetY;_this.draggingContext = __assign({ point: [offsetX, offsetY] }, _this.getViewInfo());});window.addEventListener('mouseup', function () {_this.draggingContext = null;});this.el.addEventListener('mousemove', function (e) {if (!_this.draggingContext) {return;}var _a = e, clientX = _a.clientX, clientY = _a.clientY;var _b = _this.client2offset(clientX, clientY), offsetX = _b.offsetX, offsetY = _b.offsetY;var offset = [offsetX - _this.draggingContext.point[0], offsetY - _this.draggingContext.point[1]];var _c = _this.draggingContext, oldX = _c.x, oldY = _c.y, oldScale = _c.scale;var realOffet = [offset[0] * Number(oldScale),offset[1] * Number(oldScale),];_this.setViewInfo({x: oldX - realOffet[0],y: oldY - realOffet[1],scale: _this.currentScale});});};return Roam;}());var SvgRoam = /** @class */ (function (_super) {__extends(SvgRoam, _super);function SvgRoam(el) {var _this = _super.call(this, el) || this;_this.realWidth = 0;_this.realHeight = 0;_this.init();return _this;}SvgRoam.prototype.init = function () {this.realWidth = Number(this.el.getAttribute('width'));this.realHeight = Number(this.el.getAttribute('height'));this.currentScale = this.getViewInfo().scale;};SvgRoam.prototype.getViewInfo = function () {var _a, _b;var _c = (_b = (_a = this.el.getAttribute('viewBox')) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [], strX = _c[0], strY = _c[1], strW = _c[2];return {x: Number(strX),y: Number(strY),scale: Number(strW) / this.realWidth};};SvgRoam.prototype.setViewInfo = function (_a) {var x = _a.x, y = _a.y, scale = _a.scale;this.el.setAttribute('viewBox', x + " " + y + " " + scale * this.realWidth + " " + scale * this.realHeight);};return SvgRoam;}(Roam));var svg = document.querySelector('svg');if (svg) {new SvgRoam(svg);}
</script>
相关文章：
SVG鼠标漫游
鼠标漫游 鼠标漫游就是通过移动光标和滚轮，完成画布缩放、移动的交互过程。 svg 绘图使用原点在左上角的坐标系统，一个单位代表一像素。这里的像素不能简单理解为屏幕像素，是一个用户单位。svg 的 width 和 height 属性决定图像在用户系统的…...
关于Github报SSL_ERROR_SYSCALL的解决方案
最近在运行RN项目的时候发现，在我pod install命令安装pod包时产生了 SSL_ERROR_SYSCALL 的错误，如下所示。 [!] Error installing CocoaAsyncSocket [!] /usr/bin/git clone https://github.com/robbiehanson/CocoaAsyncSocket.git /var/folders/v0/2435fl9178sd4r2_1mdgk_r…...
Redis 集群搭建教程
一、介绍 Redis 集群有着高可用、易扩展、更好的性能等优势，本文主要是实战搭建一个三主三从的 Redis 集群。 正常来说，搭建 Redis 集群需要 6 台服务器。为了简单一点，本文通过一台服务器，6 个端口，搭建一个 Redis …...
图形处理软件Photoshop Elements 2020 mac中文版 ps简化版
Photoshop Elements 2020 mac是一款非常实用的图形处理工具。ps elements 2020 mac中文版可以帮助您自动生成照片和视频作品的功能，采用Adobe Sensei AI技术可进行图像组织、编辑和创建等。Photoshop Elements 2020 for Mac激活版可以帮助您轻松整理照片和视频&…...
opencv for unity package在unity中打开相机不需要dll
下载OpenCV for Unity 导入后，里面有很多案例 直接打开就可以运行 打开相机...
[Linux入门]---进程状态
文章目录 1.进程主要状态进程运行状态进程阻塞状态进程的挂起状态 2.Linux进程状态Linux进程内核源代码①R运行状态②S睡眠状态③D磁盘休眠状态T停止状态④X死亡状态⑤Z僵尸状态⑥孤儿进程 3.总结 1.进程主要状态 进程运行状态 ①内存中有一个运行队列，其中有两个指…...
腾讯mini项目-【指标监控服务重构】2023-08-29
今日已办 Collector 指标聚合 由于没有找到 Prometheus 官方提供的可以聚合指定时间区间内的聚合函数，所以自己对接Prometheus的api来聚合指定容器的cpu_avg、cpu_99th、mem_avg 实现成功后对接小组成员测试完提供的时间序列和相关容器，将数据记录在表格…...
opencv 常用的滤波器及应用技巧
常用滤波器： 标准滤波器（邻域平均法）：该滤波器是所有滤波器里最简单的一种，输出的像素值由输入的滤波核所覆盖的像素值均值决定（每个邻域像素对其贡献的权重是相同的）。高斯滤波：该…...
【PyTorch攻略（1/7）】 张量基本语法
一、说明 Tensor 是一种特殊的数据结构，与数组和矩阵非常相似。在 PyTorch 中，我们使用张量对模型的输入和输出以及模型的参数进行编码。 张量类似于 NumPy 和 ndarray，除了张量可以在 GPU 或其他硬件加速器上运行。事实上，张量和…...
什么是Jmeter ?Jmeter使用的原理步骤是什么？
1.1 什么是 JMeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具。用于对软件做压力测试，它最初被设计用于 Web 应用测试，但后来扩展到其他测试领域。 它可以用于测试静态和动态资源，例如静态文件、Java 小服务程序、CGI 脚…...
Mac 通过 brew安装的 ffmpeg 切换版本
现有版本为 6.x ，想切换至 5.x 版本 先安装 5.x 版本 brew install ffmpeg5安装完成后会出现具体版本号，也可以自己指定例如 brew install ffmpeg5.1.3 配置环境变量 .zshrc vi ~/.zshrc添加如下命令 export PATH/usr/local/Cellar/ffmpeg5/5.1.3/bin:…...
【Spring Boot】实战：实现数据缓存框架
🌿欢迎来到@衍生星球的CSDN博文🌿 🍁本文主要学习【Spring Boot】实现数据缓存框架 🍁 🌱我是衍生星球，一个从事集成开发的打工人🌱 ⭐️喜欢的朋友可以关注一下🫰🫰🫰，下次更新不迷路⭐️💠作为一名热衷于分享知识的程序员，我乐于在CSDN上与广大开发者…...
MySQL数据类型之JSON
MySQL数据类型之JSON SON类型是MySQL 5.7版本新增的数据类型，用好JSON数据类型可以有效解决很多业务中实际问题。 使用JSON数据类型，推荐用MySQL 8.0.17以上的版本，性能更好，同时也支持Multi-Valued Indexes； JSON数…...
nginx_0.7.65_00截断_nginx解析漏洞
nginx_0.7.65_00截断_nginx解析漏洞 文章目录 nginx_0.7.65_00截断_nginx解析漏洞1 环境搭建1 解压nginx_0.7.652 双击启动，如有闪退，端口占用的情况，在conf文件nginx.conf修改一下端口号3 查看一下进程有nginx4 启动成功访问127.0.0.1:18080…...
建站百科：HTTP返回状态码是什么？
HTTP返回状态码是用于表示HTTP响应状态的三位数字代码。HTTP状态码由6位数字组成，每3位数字代表一种状态，如200表示成功，404表示未找到资源，500表示服务器内部错误等。 常用的状态码包括： 200：正常的网页…...
人像摄影简记
文章目录 光影室外顺光室内顺光室外逆光室内逆光散射光 姿势错误姿势避免摆拍技巧场景互动抓拍利用道具 构图构图目的构图基础概念画幅：横画幅和竖画幅景别：全身、大半身及半身、特写拍摄高度：平拍、俯拍和仰拍拍摄方位：正面、前侧…...
【Java 基础篇】Java 实现模拟斗地主游戏
欢迎阅读本篇博客，在这篇博客中，我们将详细讲解如何使用Java编写一个简单的模拟斗地主游戏。这个项目将帮助您了解Java编程中的一些基本概念，如面向对象编程、集合框架的使用、随机数生成等。 引言 斗地主是一种非常受欢迎的纸牌游戏&#…...
计算机专业毕业设计项目推荐09-个人医疗系统（Spring+Js+Mysql）
个人医疗系统（SpringJsMysql） **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及…...
安卓Compose（一）
为什么学习安卓Compose？ 安卓Compose是一个相对新的UI工具包，它的出现为安卓应用程序开发带来了一系列的好处。下面是一些学习Compose的理由： 声明式UI 与传统的安卓XML布局相比，Compose使用了声明式的UI编程范例。这意味着你可以…...
【Linux学习】03Linux用户和权限
Linux（B站黑马）学习笔记 01Linux初识与安装 02Linux基础命令 03Linux用户和权限 文章目录 Linux（B站黑马）学习笔记前言03Linux用户和权限认知root用户root用户（超级管理员）su和exit命令sudo命令 用户、用户…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...