vivus icon indicating copy to clipboard operation
vivus copied to clipboard

Vivus MAP Array Empty, no animation rendered.

Open RaidPRDev opened this issue 3 years ago • 2 comments

Vivus version: 0.4.6

Browser: Chrome 92.0.4515.131, Edge 92.0.902.62 and Firefox 90.0.2 ( Windows 10 )

Steps to reproduce it: So my svgs are not animating, but I did get it to work. More on that later. When I log the Vivus element returned by the onReady function, the MAP array prop is empty.

A bit on my environment: I'm using Webpack 4.44.2 for bundling my code. I am using the file prop to load my svg. When Vivus iterates through the paths , it will trigger the Vivus.prototype.isInvisible function. It will attempt to get the data-ignore attribute el.getAttribute('data-ignore'), and then checks if ignoreAttr is not null. However, ignoreAttr is set as undefined on my end, and so it will not allow the paths to populate the MAP array.

What is interesting is, if I use plain HTML and JavaScript, no bundling. It works fine. The ignoreAttr is null and passes the condition if (ignoreAttr !== null) check.

I used this example to validate this - http://maxwellito.github.io/drafts/vivus-198/index.html

Anyways, I got it to work nice by adding ( ignoreAttr !== undefined ) to the following line:

if (ignoreAttr !== null && ignoreAttr !== undefined)

So the issue may very well be Webpack and my configuration. For what ever reason, ignoreAttr sets to undefined instead of null. Hope this may help someone with a similar setup.

RaidPRDev avatar Aug 04 '21 06:08 RaidPRDev

Awesome library btw, kicks ass =)

RaidPRDev avatar Aug 04 '21 06:08 RaidPRDev

Hi @RaidPRDev Thanks for reporting the bug. That's an interresting discovery. Can you provide me a way to test this? That would be very handy. I would like to analyse this issue, I wonder which other lib is messing with the specs. However the patch should be pretty straighforward tho :) Many thanks,

  • Max

maxwellito avatar Aug 05 '21 20:08 maxwellito