javascript - 保存 SVG 单击位置并在重新加载时重新创建它

Question

我是使用 SVG 的新手，而且我正在努力处理一个项目的一部分。我正在尝试将用户的点击位置保存在可缩放/可平移的 svg 上，以便我可以在加载页面时从那时起重新创建它。

我正在使用 snap.svg 和 snap.svg.zpd，因为我在开始这个项目时看到它们在示例中使用。

(这部分工作)
用户可以缩放/平移 svg 并使用鼠标单击在图像上放置标记。

html:

 <svg id="svgmap" width="695" height="900" ></svg>

js:

var mySvg = $("#svgmap")[0];
var snap = Snap("#svgmap");

var imageMap = snap.image("mySvgUrl", 10, 10, 695, 900);
var group = snap.group(imageMap);

var pt = mySvg.createSVGPoint(); 

imageMap.click(function (evt) {

pt.x = evt.clientX;
pt.y = evt.clientY; 

//find the coordinates within the svg
var transformed = pt.matrixTransform(mySvg.getScreenCTM().inverse());

//place marker 
var marker = snap.image("myMarkerUrl", transformed.x, transformed.y, 8, 8)
group.add(marker);
});

(这部分不起作用。)
我想保存用户点击的位置，以便在下次加载页面时重新创建标记的位置。页面重新加载时我无法重新创建位置。

我已经通过更改我保存的值来解决问题(用户点击的 x/y 坐标、转换后的坐标，甚至绝望中尝试的 View 区域百分比)，并通过更改我为重新加载的 svg 转换坐标的方式。我认为这已经很接近正确了。

var pt = mySvg.createSVGPoint();
pt.x = mySavedX;
pt.y = mySavedY;

var recreatedPoint = pt.matrixTransform(mySvg.getScreenCTM())

var marker = snap.image("myImageURL", recreatedPoint.x, recreatedPoint.Y, 4, 4)
    group.add(marker);

//center the marker and zoom-in
    var zoomscale = 3; 
     mySvg.firstElementChild.setAttribute("transform", "translate(" + (1-3)*recreatedPoint.x  + "," + (1-3)*recreatedPoint.y + "), scale(" + zoomscale + "," + zoomscale + ")");

如何在下次加载页面时重新创建之前缩放/平移的 SVG 单击的位置？

Answer 1

您在步骤 1 中为标记生成的转换点是您要保存的点。 IE。 transformed.x 和 transformed.y。您在那里所做的是将点击的屏幕空间坐标转换为 SVG 用户空间坐标。

这些 SVG 坐标现在独立于 SVG 的缩放和平移方式。只需使用那些坐标。把你的标记放在那里。您不需要进行任何进一步的转换。

var marker = snap.image("myMarkerUrl", mySavedX, mySavedY, 8, 8)
group.add(marker);