Magnu5

@Rodrigo @mikel Ahh, you are right, sorry. New pen: Also updating original. M

@omarel As noted, I am already familiar with the SVG spec, viewBox, viewport and the related coordinate systems and transform behaviors. Your time and input is appreciated, however I am not looking to get into a discussion about SVG viewBox here. It is an unrelated and slightly complex topic if you have not spent time studying it. The point is that introducing Draggable changes the position of the SVG element, adding some kind of invisible margin / boundary. Remove Draggable, and the SVG as well as its surrounding container go back to behaving the way they normally do.

This example is just a minimal working example. I am familiar with viewBox and use it in my SVGs regularly. If you remove Draggable you will see that it does indeed position as it should.

As seen from the codepen, when using Draggable on an SVG with a viewBox, the svg looses its position at top left. It should be in the very top left, but instead some kind of top / left margin has been added (or some kind of offset). This in turn ruins the bounds. Remove Draggable and you will see the SVG returning to its normal position at top right of the surrounding container.