我刚开始和SVG一起工作，而且我正在为一个项目的一部分而奋斗。我正在尝试将用户的单击位置保存在可伸缩/pannable svg上，以便在加载页面时从该位置开始重新创建它。

我使用snap.svg和snap.svg.zpd，因为我在启动这个项目时见过它们在一个示例中使用过。

(本部正在运作)

用户可以缩放/平移svg，并通过鼠标单击在图像上放置一个标记。

html：

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

联署材料：

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坐标、转换的坐标，甚至在绝望中尝试视图区域的百分比)，以及更改重新加载的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)