Hollow Matter.js SVG
Hey @Web Bae I followed through your "Matter.js with Responsive SVG Bodies" tutorial, thanks by the way. In it you noted that you didn't get SVGs with holes in them to work like the letter O.
I'm just wondering, is there any way to get this to work? I haven't really found anyone on the internet addressing it. Spent the past couple of hours trying to think of ways around it to no avail.
Thanks :)))
5 Replies
I’m sure there is a way but I wasn’t able to get it working with the tools I had in that video. It’s hard to find support for SVG and or matter.js specifically too. Greensock folks in forum tend to be pretty good with SVG though … you might also try Stack Overflow.
for interests sake, I was able to solve this by simply adding a small slit into any enclosed hole then covering it up with a stroke
That’s awesome! Glad you figured it out. Would love to check the file or see a short video describing your solution if you have time!
Sent this before but I think it glitched
The solution is pretty simple, I just edited the original SVG in illustrator and added a tiny gap so that it was all technically one continuous path. In my experience the gap can go as low as 0.1 px wide before Matter.js starts having issues. At that size you already can't see it at most scales, but to be sure adding a stroke covers everything:
render: {
fillStyle: "#000000",
strokeStyle: "#000000",
lineWidth: 1
},
I could see this gap potentially causing clipping issues if you were making a game but as I just needed it for visual purposes this worked perfectly.
Awesome solution. Thanks so much for sharing