[Draggable breaks SVG]

On 1/28/2019 at 3:04 PM, mikel said:

Hi @Magnu5,

Hi @Rodrigo,

 

The original CodePen case was changed (?).

 

On 1/28/2019 at 3:08 PM, Rodrigo said:

 

At least I don't see any Draggable instance being created.

@Rodrigo @mikel Ahh, you are right, sorry.

 

New pen: 

See the Pen aXmZLP by magnusriga (@magnusriga) on CodePen

Also updating original.

 

M

[Draggable breaks SVG]

3 hours ago, omarel said:

@Magnu5 I believe this issue is related to the way the SVG dom itself works. 

 

If an SVG has a width of 50px and the viewbox is set to 100px it will create the necessary empty space to fill in the viewbox. So technically the SVG is acting like it should by providing that additional padding.

 

Once those properties are removed or adjusted within the svg it should be edge to edge again. 

 

@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.

[Draggable breaks SVG]

22 minutes ago, omarel said:

I think the issue is your viewbox in the SVG. I changed the SVG like so and it goes edge to edge

 

<svg id="test-svg" width="50" viewBox="0 0 50 50">
    <rect height="50" width="50" fill="red"/>
  </svg>

 

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.

[Draggable breaks SVG]

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.

See the Pen aXmZLP by magnusriga (@magnusriga) on CodePen