dictionary - SVG 地图缩放保持图标和工具提示正常大小

Question

我制作了一个 SVG 地图，该地图具有选择一名足球运动员并动态显示该足球运动员踢过的俱乐部的功能。请参阅http://527229-1.web1.fh-htwchur.ch/。当您单击“Fussballer”然后选择一个名称时，球杆的位置（足球图标）将显示在地图上。当您将鼠标悬停在图标上时，会显示一些信息。

我的问题是，我想在缩小/缩小（无比例）时保持图标和工具提示不缩放。使文本和图标始终保持相同大小。对于缩放功能，我使用了https://github.com/ariutta/svg-pan-zoom库，它工作正常。

调用 onZoom 方法时，我花了几天时间处理一些转换公式，但我无法正确处理。非常感谢您的帮助。（我知道有 D3 库也可以进行缩放，但如果可能的话，我想保留 svg-pan-zoom）。

这是一个简化的示例https://jsfiddle.net/n8kLz5ty/1/。

我希望工具提示和其中的文本无论缩放如何都保持相同的大小和相同的位置。

<h1>Demo for svg-pan-zoom: In-line SVG</h1>
<div id="container" style="width: 400px; height: 300px; border:1px solid black;">
<svg xmlns="http://www.w3.org/2000/svg" style="width: 400px;  height: 300px; "version="1.1" id="map-svg">
    <g id="circle">
    <circle cx="102" cy="197.5" r="20" stroke="black" stroke-width="0.1" fill="red" />
        <g id="tooltip" opacity="0.7" transform="translate(20 20)">
            <rect x="104" y="197.5" width="80" height="40" rx="5"/>
            <text x="107" y="209.5">Test</text>
        </g>
    </g>    
</svg>
</div>
<script>
    function init() {

    window.zoomTiger = svgPanZoom('#map-svg', {
      zoomEnabled: true,
      controlIconsEnabled: true,
      fit: false,
      center: true,
      minZoom: 1,
      maxZoom: 50,
      zoomScaleSensitivity: 0.5,
      onZoom: function(){   
        //in the following segment I tried with different values to counter the zoom and the transform of the tooltip, but honestly I have no clue!
        var values = svgPanZoom('#map-svg');
        var realZoom = values.getZoom();
        var viewBox = values.getSizes();
        var height = viewBox.viewBox.height;
        var y = height/2;
        var width = viewBox.viewBox.width;
        var x = width/2;
        var Zoom1 = 1.02/(realZoom+0.02);
        x = (realZoom-1)*0.95*x + 20;
        y = (realZoom-1)*0.85*y + 20;
        document.getElementById("tooltip").setAttribute("transform", "scale(" + Zoom1 + ") translate(" + x + "," + y + ")");    
       },
     });
    };
    init();

</script>

标签： dictionarysvgzooming