mojs / mojs

The motion graphics toolbelt for the web
https://mojs.github.io
MIT License
18.53k stars 889 forks source link

bug with 'height' parent tag svg #92

Closed Frimko closed 7 years ago

Frimko commented 7 years ago
class Heart extends mojs.CustomShape {
  getShape () { return '<path d="M0,120.5c4.6,0,9.3,0,13.9,0c39.6,0,59.6-30.6,59.1-61C73,29.8,52.8-0.2,13.3,0H0.1c0,19.7,0,39.4,0,59.1 C0.1,79.6,0.1,100,0,120.5z"/>'; }
  getLength () { return 200; } // optional
}
mojs.addShape( 'heart', Heart ); // passing name and Bubble class
const heart = new mojs.Shape({
  shape:    'heart',
  fill:     'none',
  stroke:      '#FD5061',
  scale:    1,
  strokeWidth: 1,
  y:         -20,
  duration:  1000,
  origin:'100% 100%',
});

new MojsPlayer({ add: heart });

the letter d is shown not fully

legomushroom commented 7 years ago

Hi @Frimko!

Thanks for the issue! To have it shown fully you need to make the shape not exceed 100x100 rectangle - demo. Of course, you can have any size afterward by usage of shapes properties like radius, but the original source shape should be inscribed inside the 100x100.

Thanks!