Should DrawSVGplugin work with em?

[Friebel]

Currently I'm animating simple SVG lines using the drawSVGplugin (version 0.1.1). The from and to values of the <line> are in ems instead of pixels.

 

To my surprise doing a fromTo from { drawSVG: '50% 50%' } to { drawSVG: '0% 100%' } is showing a messed up animation with dashed lines. So it's using the wrong (or zero) values for the dashArray.

Converting the em-values in the X1,Y1,X2 and Y2 attributes of the <line> elements to pixels fixes this problem and shows the animation like expected; filling the lines from the middle to the outsides.

SVG does support ems, also inside attributes and it's working in Chrome, Firefox and even IE without problems. So it seems I'm missing something here, or drawSVGplugin isn't supporting ems. Since the rest of my project is in ems for scaling, I'd like to make the animation work with ems too. Is this possible? Should drawSVGplugin support ems?
 

solutionTl.staggerFromTo(
  this.solutionLines, 
  1.5,
  { drawSVG: '50% 50%' }, { drawSVG: '0% 100%', ease: greensock.Sine.easeIn }, 
  0.5
);

I tried creating a codepen to show this, but it is complaining about the drawSVG pluging requesting its license over an unsecure http connection instead of https, so this isn't working.

See the Pen XLnmrD by maarten77 (@maarten77) on CodePen

[PointC]

HI Friebel 

 

You can certainly use ems or pixels, but trying to mix the two can cause problems. Your SVG is using a pixel based coordinate system. If you want to use ems, you'll have to use that as your user based coordinate system. For an easy fix, I just wrapped your line element into a nested SVG and used ems as the coordinate system. It all seems fine to me in this fork of your pen: 

 

See the Pen vxqQpd by PointC (@PointC) on CodePen

 

You don't have to use a child SVG. I only did it that way in case you were planning additional SVG elements in the parent that were going to be using pixels since the parent was 570x150. If you want it all em based, you could simply do this too:

    <svg width="35.625em" height="9.375em"  viewBox="0 0 35.625 9.375">
      <line id="lineElem" x1="0" y1="1" x2="10" y2="10" class="line" stroke="#ff0" stroke-width="0.5" />
    </svg>

See the Pen wJLQax by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

[Friebel]

Thanks for your time and quick response PointC, that worked! Never knew about SVG had one coordinate system or the other, very nice to know now!