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坐标，变换的坐标，甚至是绝望的视图区域的尝试百分比），以及通过改变我为重新加载的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);

保存SVG点击位置并在重新加载时重新创建

1 个答案: