search

wufe / react-particles-js

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

Polygon URL issue #81

Closed jp-signum closed 5 years ago

jp-signum commented 5 years ago

Having used both particle.js and your library before, I can not seem to get the URL component of my polygon params to correctly locate my svg I have tried putting it and changing the path to almost everything I can think of. Here are the errors from the console:

Screen Shot 2019-03-09 at 6 50 29 AM

This was me testing the url route: "/jp_poygon_singlePath.svg"
as its at the root of my project ... I have tried to fetch it from numerous other places as well. Please help.

Things that may be affecting it: react-router ? although the canvas is showing up correctly in the desired location

https://github.com/jp-signum/jp_sig_reactv1.git is the repository

wufe commented 5 years ago

You have to serve the svg file in a public folder: is http://localhost:3000/jp_polygon_singlePath.svg accessible navigating from the browser ? If not, the script cannot download the svg.

jp-signum commented 5 years ago

ahhhhh I see after moving it to my public folder and readjusting the url it now seems to be accessing the svg correctly however nothing is drawing on the canvas. I have removed all styling and anything I can think of from the parent components and container yet it does not seem to be working. Any suggestions on how to debug this? I am assuming its the svg ? I have the script in the body of my body

wufe commented 5 years ago

First try a minimal particles settings, then adjust the css (it may be possible that white particles are rendered upon white background, thus they are not visible). After you got a minimal template, proceed with the svg polygon.

jp-signum commented 5 years ago

when starting with a minimal setting I get this error

Screen Shot 2019-03-09 at 7 54 26 AM
jp-signum commented 5 years ago

hey looks like i was able to figure it out thanks for the help

jp-signum commented 5 years ago

sorry have you ever seen anything like this happen ? and do you know where this might originate

Screen Shot 2019-03-09 at 8 18 52 AM

obviously those static lines arent supposed to be there

wufe commented 5 years ago

Open your file with a svg editor and check if the path is correct

jp-signum commented 5 years ago

yeah I made it in adobe illustrator, after trying a few different things I realized there were some transforms being added and I was able to remove them before exporting the svg because simply deleting them from the svg code didnt solve the problem. I was able to do this by using the reset bounding box property in AI ...... just in case anyway has a similar issue.

Thanks for answering quickly and helping me out !!!! much appreciated :)

ghost commented 5 years ago

Hi, @jp-signum! I am having the exact same issues as you. May I know how you were able to solve it? Thanks in advance!

jp-signum commented 5 years ago

@ambwani what issue is that?