CODEWITHSUNDEEP
svgpanzoom
xentia
xentia

Reputation: 435

exclude SVG element only from zoom or only from pan functionality

I wonder is it possible to exclude SVG element (like circle) only from zoom (scale) functionality and preserve his panning. For example: in map i point my current position with red filled circle. When user zoom, i want that this circle have a constant radius. When user pan - i want circle to pan with all other viewport content. I found this solution:

Scale independent elements

But it seems that i can't figure out how to use it correctly with svg-pan-zoom library.

Also I wonder for similar task - is it possible to drag and drop some element? Mean just that element to be excluded from pan functionality? I was try some approach like jQuery draggable but with no luck.

Thank you

Upvotes: 1

Views: 615

Answers (1)

xentia
xentia

Reputation: 435

Well after a few weeks I've some kind of workaround. I use onZoom event handler of ariutta/svg-pan-zoom library and write a simple function like this:

 onZoom=function(currZoom){
  document.getElementById("marker").setAttribute("r", 2/currZoom);
}

In my case I have a little circle which represent current position. Now, when user zoom, library pass current zoom level as argument, and we divide him to radius and off we go!

Also i found a way to achieve my other question. Drag and drop is possible if we use enablePan / disablePan in corresponding mouse event on desired element. I can't post code example for now, because i still cant clarify how to calculate exact dX/dY to match to current zoom level, but that definitely work.

UPDATE 2024 Here is some simple example - insert follow svg in body tag:

<svg viewport="0 0 100 100" id="svg">
    <rect width="100" height="100" x="0" y="0" rx="20" ry="20" fill="blue"/>
    <circle id="marker" r="20" cx="50" cy="50" fill="red" />
</svg>

And this java script:

window.onload = function() {
    // Expose to window namespase for testing purposes
    window.zoomSVG = svgPanZoom('#svg', {
      zoomEnabled: true,
      controlIconsEnabled: true,
      fit: true,
      center: true,
      onZoom:function(currZoom){document.getElementById("marker").setAttribute("r", 20/currZoom);
      }
    });
 }

Now - when zoom event fire - we set radius attribute. So - when zoom level is 1 -> 20/1 = 1; 2->20/2=10, etc.

Upvotes: 1

Related Questions