home
<< Message Board

Problem with custom SVG

Submitted by samy13 on November 13, 2024
So basically I'm trying to do a custom SVG, on inkscape I made rectangles on a template and I want that when you guess the rectangle vanishs. But it doesn't vanish. I created the class row in inkscape, I put the correct names Step 2, and I put the code given in the guide in the description. What did I do wrong ?
8 Comments
McKenzieFam
+1
Level 68
Nov 13, 2024
Activate Hidden Paths, under SVG options in Step 4, save and try again
samy13
+1
Level 14
Nov 13, 2024
I had already activated it
McKenzieFam
+1
Level 68
Nov 13, 2024
Hmm. Collaborate it with me and I can take a look for you
samy13
+1
Level 14
Nov 14, 2024
Added. Thank you for your time
McKenzieFam
+2
Level 68
Nov 14, 2024
Wow, this is interesting. I'm not immediately certain why the rectangles aren't vanishing, but I will see what I can do
Dimby
+1
Level 83
Nov 13, 2024
From the sounds of it, you can do this with CSS styles. In the JetPunk instructions box, you can add css styling using the triangle brackets >.

< style >

.svg-holder .svg-correct {

opacity: 0;

visibility: hidden;

transition: all 0.5s;

}

< /style >

Just don't put the spaces between style and the triangle brackets. This should make correct answers vanish when they get the corresponding class added to them when they're correct.

McKenzieFam
+1
Level 68
Nov 14, 2024
Okay, it's fixed now. I used Dimby's code from above (thanks Dimby!), and I also removed the spaces from the path IDs, and stopped using the classes in the SVG and just used entirely path IDs. I also added and labelled all the rectangles for you.

Hopefully that helped!

samy13
+1
Level 14
Nov 15, 2024
You are amazing. Ty so much
Copyright H Brothers Inc, 2008–2026
Contact Us | Go To Top | View Desktop Site | Site Map