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方法提供适当的值。

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

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只是要放置在整个svg场景上的矩形（x，y，宽度，高度）。因此，如果您只需要居中并放大圆圈而无需使用任何JavaScript（以非编程方式），那么您将需要：

定义圆的边界框尺寸（因为它的r = 0.001，因此容易找到边界框的尺寸：宽度：0.002，高度：0.002）
定义该边界框左上角的坐标。为此，您需要获取圆的中心坐标并减去半径（这是圆的边界框的一半）：

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>

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

将图形居中指向特定的视图框

1 个答案: