Question

我目前正在使用SVG平移缩放功能来缩放和平移SVG。所涉及的SVG中有一个翻译，可将原点重设为左下角而不是左上角。我知道要缩放到的位置，但是当我尝试使用内置的zoomAtPoint，zoomAtPointBy和pan功能时，我无法从其工作中脱颖而出。取决于缩放，使用{x：0，y：0}调用这些函数中的任何一个似乎都有不同的功能。

这里是一个示例，我想要执行的操作是平移到“ zoomToMe”组。它的坐标是：114300、25400。

var svg = document.getElementById('svg');
var panZoom = svgPanZoom(svg, {
	controlIconsEnabled: true,
});

var zoomToMe = document.getElementById('zoom-to-me');

<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.0/dist/svg-pan-zoom.min.js"></script>
  <svg
    id="svg"
    version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="0"
    fill-rule="evenodd"
    clip-rule="evenodd"
    viewBox="-2500 -2500 335200 55800"
    width="335.2mm"
    height="55.8mm"
    xmlns="http://www.w3.org/2000/svg"
    style="width: 250px; height: 250px;"
  >
    <g transform="translate(0,50800) scale(1,-1)">
      <rect x="-2500" y="-2500" width="335200" height="55800" fill="currentColor" class="HGogw9tf0A8j_fr4"></rect>
      <g id="zoom-to-me" transform="translate(114300, 25400)">
        <rect width="3900" height="4900" style="fill: rgb(70, 69, 69);"></rect>
      </g>
    </g>
  </svg>

如何放大特定点-翻译内部

0 个答案: