DrawSVG new line shifts start/end position

[Skybox Dev]

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.

[OSUblake]

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.

[Skybox Dev]

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.

[OSUblake]

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

[Skybox Dev]

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 });
};

[Skybox Dev]

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.

[Skybox Dev]

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

[OSUblake]

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, " ");

[Skybox Dev]

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!