search

wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 106 forks source link

Color property doesn't get applied on image shape which is svg. #129

Closed Arshazar closed 4 years ago

Arshazar commented 4 years ago

I used it before and it worked smoothly, but when I use recent update which uses tsparticles, when I use "image" property, color won't be changed! I use latest versions of react and afterjs... svg images load, but their color does not!

color: {
            value: '#fff',
        },
matteobruni commented 4 years ago

Hello @Arshazar,

Thanks for the report, I never thought about parsing SVG color, so SVG images are used like all the others. I'll work on this issue ASAP.

matteobruni commented 4 years ago

Yes it’s my fault, I’m already working on that.

Do you have a SVG to share for making tests? Otherwise I’ll search one later.

Arshazar commented 4 years ago

@matteobruni Sure, you can try this out: https://www.flaticon.com/packs/dog-breeds-11 Download one of them in collection :)

matteobruni commented 4 years ago

Hi @Arshazar, if you install tsParticles 1.14.3 manually you should have the fix.

Some notes about it:

  1. The replace script, like the old version, replaces colors. It doesn't add them, if a SVG image has no color it will be displayed always black
  2. The SVG file should be simple, namespaces can break browser compatibility, I've tested this version with one of your SVG (adding colors in code) in Safari, Chrome and Firefox.
  3. The color replace option is disabled by default so if you need it you can enable it where you specify the src property. The replace option is replaceColor.

Hope everything works as expected

Arshazar commented 4 years ago

Hey @matteobruni , Thank you for the description and the update on tsparticles :) By now, replaceColor option works.