Gingah

I noticed, and neither seemed to give an accurate reading on where I dropped the stickers. At first I thought that was the same example I was working off of earlier, but that's a great addition! For some reason the fork-button disappeared, but I put some of the code I was using into it, and the location-fidelity seems to work exactly as expected: https://codepen.io/Gingah/pen/QWjNeYV I'll have to revisit the use of localForage, it might be over the top when I just need to pass an object into storage via POST. @ZachSaucier and @OSUblake, many thanks for your rapid responses and especially that excellent example Blake! This will get me across the finish line.

Thanks! The stickers are non-vector, but in the application I also include a lot of vector-elements like rect and text, hence the fairly large frame of the SVG. I just omitted them for brevity. I can rectify the IDs as you suggest, I just haven't gotten past the current issue yet. Scaling with transform seemed to be the most apt way to preserve the viewBox- and preserveAspectRatio-attributes of the SVG, at least when I was building the original SVG. This was also easier to apply when the SVG is absolutely positioned, because it will stack with other SVGs and a background image, thus keeping them the same size consistently. The application emulates layers in graphical editors a bit in that regard, overlaying colors in the rectangles. It probably is easy enough to do with the native API, but the LocalForage API is so elegantly written I just fell for it. Also easy to grab all of the relevant data and POST it somewhere. I tried with having the stickers absolutely positioned in a separate "layer" initially, but had some problems maintaining the bounds within the SVG when dragging them. The problem seems to be that the matrix is applied onDragEnd and so the x,y I get from "this.x" or "this.target.getBoundingClientRect().x" is inaccurate when loaded again. This is why I use "sticker.setAttributeNS(null, "transform", `matrix(1, 0, 0, 1, ${x}, ${y})`);" in the build()-function. I also tried setting the x- and y-attribute, but at no point could I get an accurate value for them when reapplying the position. It also produces a rather easy to handle SVG-element that I can easily reuse, change the Z-index of, or transport elsewhere. Does the inaccurate location happen because of the scaling, and would I need to calculate the x and y relative to the SVG itself? I'm a bit confused about what units I am working with and what they are relative to, and how to maintain location when I scale the element(s).

Hello, I've been reading and trying out different CodePens and code from this forum, but I am stuck trying to reapply the locations from a Draggable accurately within a scaled SVG. This is what I'm doing: Create draggable stickers from a list of image URLs, as image-elements within the SVG Clone the image-element and make it draggable Assign an id-attribute and try to make it unique Store the source and x,y-location of the image to LocalStorage (using LocalForage) Rebuild the image-element from LocalStorage and make it draggable onLoad The SVG is scaled with CSS: transform: scale(0.65); https://codepen.io/Gingah/pen/yLYOMvG You'll notice that dragging a sticker to the lower right corner, for example, won't keep it there when the page is reloaded. It'll reset to somewhere below the original location of the sticker. I think this has to do with this attribute: transform: matrix(1, 0, 0, 1, x, y); But I can't figure out what x- and y-property I need to save and apply to preserve the location within the scaled SVG. Has anyone attempted anything similar? My application is a simple map where I drag and drop stickers, and want to save their location for further use.