将绘图居中到特定视图框中的点

Question

我正在使用 ariutta svg-pan-zoom 脚本。选项 fit 和 center 设置为 true。在我的 SVG 中有一个像这样的视图框定义：

viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"

svg 的宽度和高度设置为屏幕尺寸。

这实际上是一个地理坐标边界。需要以地理坐标中的特定点为中心，例如：27.81 -43.221，然后在第 4 级缩放。 据我了解，我必须为平移功能提供像素坐标。在我的情况下如何计算它们？

以下是完整的 svg 源代码

<svg id="svg" width="1174" height="735" viewBox="27.7333333 -43.2233334 0.2183334 0.0566667">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>
<script>
var PTZ = svgPanZoom('#svg', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            contain:true,
            minZoom:1,
            maxZoom: 300,
            viewportSelector: '.svg-pan-zoom_viewport'

        });
    PTZ.zoom(2);
    PTZ.panBy({x: -220, y: 0})
</script>

我想居中并缩放到 ID 为“marker”的圆形区域，为 zoom 和 panBy 方法提供适当的值。

更新 - 我创建了一个代码 sn-p 来说明我的问题

var PTZ = svgPanZoom('#svg', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            contain:true,
            minZoom:1,
            maxZoom: 300,
            viewportSelector: '.svg-pan-zoom_viewport'

        });

 PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})

<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <svg 
	id="svg" class="mapNavSVG"
	width="400" height="300"
	viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
	preserveAspectRatio="xMidYMid meet" 
	xmlns="http://www.w3.org/2000/svg" 
	xlink="http://www.w3.org/1999/xlink" 
	ev="http://www.w3.org/2001/xml-events" 	
	shape-rendering="geometricPrecision"
	
	>
	
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>

Answer 1

所以 viewBox 只是一个矩形（x,y,width,height），你想放置在你的整个 svg 场景上。因此，如果您只需要在没有任何 javascript（以非编程方式）的情况下居中并放大圆圈，那么您会想要：

1. 为你的圆圈定义边界框大小（因为它的 r = 0.001，边界框的尺寸很容易找到：宽度：0.002，高度：0.002）

2. 定义边界框左上角的坐标。为此，您需要获取您拥有的圆的中心坐标并减去半径（这是圆的边界框的一半）：

   cx="27.9426815914392" cy="-43.1805954054158"

   边界框 x 则：27.9426815914392 - 0.01 = 27.9416815914392； 然后边界框y：-43.1805954054158 - 0.01 = -43.1815954054158;

所以现在你的总 viewBox 可以构造为：

viewBox="27.9416815914392 -43.1815954054158 0.002 0.002"

如果您需要一个程序化的解决方案，这可以使事件更容易，您只需要利用 SVG 规范中存在的边界框 API：

function init() {
  var mainSVG = document.getElementById('svg');
  var circle = document.getElementById('marker');
  var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
  mainSVG.setAttribute('viewBox', boundingBox)
}

<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>

我不知道您想要实现的确切定位，但我希望这个答案可以帮助您确定方向