Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Magnu5

Draggable breaks SVG

Recommended Posts

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hm, I'll have to look into this but it does seem to resolve things if you set transform-origin to "left top" on the SVG. 

  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Sorry I couldn't be of any more help on the topic besides what I noticed on your viewbox. Maybe the team will be able to address whatever I'm missing. 

  • Like 3
Link to comment
Share on other sites

Hi,

 

In the codepen sample I don't see any Draggable code. Could you please include it in order to get a better grasp of what's happening here?

 

Quick question, have you tried this without using Flex in your styles? I'm not saying that flex is causing this, but the solution could be in finding a workaround involving flex, just a thought.

 

Happy Tweening!!!

Link to comment
Share on other sites

2 minutes ago, mikel said:

The original CodePen case was changed (?).

 

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×