Jump to content
GreenSock

Skybox Dev

DrawSVG new line shifts start/end position

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

This issue has been bugging me for the past few hours, but I've managed to point it down to the new lines Illustrator adds to SVG files when there are a lot of points and the lines become too long.

 

Maybe it's an option I've been overlooking and I can turn this behaviour off, anyhow these new lines Illustrator adds on points changes the start/ending positions on SVG paths.

 

I've added a codepen, the SVG file gets injected on the place of the img tag with an modified version of SVG Injector (https://github.com/iconic/SVGInjector)

 

 

I'm not sure if this is a GSAP problem or a bug in Chrome. But it might be worth looking into.

 

Kind regards,

 

Mark

See the Pen XJQWEd by mrksmts (@mrksmts) on CodePen

Link to comment
Share on other sites

Hi Skybox Dev

 

I think this is more of an issue of SVGs being picky about whitespace, which you can remove using this...

shapes.each(function() {
  $(this).attr("points", $(this).attr("points").replace(/\s+/g, " "));
});

See the Pen WbWwrO by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Hi OSUblake,

 

It seems to be a whitespace issue indeed. When looking in the inspector it shows three spaces instead of one due to the extra lines/whitespaces Illustrator adds.

The SVG renders correctly but the get total length seems to be incorrect.

 

Might be a nice improvement for the SVGplugin itself, normalizing the SVG points?

 

Thanks for the snippet, we'll use that for now.

Link to comment
Share on other sites

The getTotalLength method is for paths, not polylines. Or did you try it on a path and the whitespace removal messed it up?

Link to comment
Share on other sites

No, the whitespace removal works like a charm, as far as I could test it for now.

 

What I ment was that when you don't do anything with the SVG the SVG just renders correctly even with the extra white spaces and new lines.

When you apply a tween to it like animate from 0 to 100% then the start/end points get shifted like in the first example.

 

We've build something similar before the SVGplugin existed with only paths and using the getTotalLength method. The behaviour the original SVG now gave with the plugin looked similar to when the getTotalLength method for paths gave a wrong value (like sometimes happens in Firefox) that's why I assumed the polylines use something similar.

 

Since the plugin makes life a lot easier we decided to migrate our code.

This is a snippet of what I've used before using the plugin to set all the paths before animating them.

var paths = document.querySelectorAll('path');
for (var i = 0, l = paths.length; i < l; i++) {
	var path = paths[i];
	var pl = path.getTotalLength();
	path.setAttribute('data-pathlength', pl);

	TweenMax.set(path, {strokeDashoffset: pl, strokeDasharray: pl + " " + pl });
};

  • Like 1
Link to comment
Share on other sites

Well everything appears to animate correctly except for the polygon. Which has the 0 position in the negative.

Any thoughts on why this might happen?

 

Updated the pen:

See the Pen QwRroy by mrksmts (@mrksmts) on CodePen

Link to comment
Share on other sites

Figured it out, the ending space seems to be causing problems here.

Link to comment
Share on other sites

  • Solution

Sounds like you got a lot of issues with whitespace. You can remove the leading and trailing whitespace using trim or with this regex...

// leading and trailing
myString.replace(/^\s+|\s+$/g, "");

// or all whitespace...
myString.replace(/^\s+|\s+$/g, "").replace(/\s+/g, " ");
  • Like 3
Link to comment
Share on other sites

Forgot to monitor this threat. :) It appears white-spaces are evil for svg's.

 

The svg's we use come straight out of Illustrator CC so I'm not sure if it is Illustrator or an incorrect setting.

I ended up with something similar, thanks!

  • 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.
×