Can someone help me make this SVG interactive? I want each clickable part to highlight when clicked and store a "true" boolean value for that part.
Hi @Benedict cruz
You can make the SVG interactive in 3 simple steps:
Step 1 — Group related paths Wrap all paths that belong to the same body part inside a element. This allows you to treat each part as a single clickable unit.
Step 2 — Assign an ID to each Give every group a unique ID (e.g., front_head, front_torso, front_arm_left, etc.). These IDs will be used by JavaScript to attach click events.
Step 3 — Add JavaScript in the Screen’s OnReady In the OnReady event, add a small JavaScript snippet that:
attaches a click listener to each group
toggles the highlight color
stores a boolean value for each selected body part
This approach works well with Inline SVG in OutSystems and makes the SVG fully interactive.
I’ve attached an example OML below.
Hope this helps. If it does, please mark it as a solution — it's good motivation for helpers.
Regards,
Peter Hieu
Thank You Sir @Peter Hieu For Helping You're the best
What did you use to edit the svg?
I didn’t use any external tool.I just edited the SVG directly as text.Using the browser’s DevTools, I inspected the paths to find the exact parts I wanted to group, then wrapped them inside <g> elements following the steps I mentioned above.
Thank you sir
Anytime.
Hi @Peter Hieu ,
this example oml doesn't work as is shared here.
1) the body parts you define in your javascript code, don't actually exists in the DOM
2) your choice for clickable areas on the svg is probably not what it should be : your svg has every little penstroke (each dash, each single number or percentage sign) as a separate area. I think the clickable area should probably be the whole body part.
Hi @Dorine Boudry
I understand that each clickable area should ideally cover the full body part, but the SVG provided by the OP only contains those small individual elements, and I was simply creating an example for them — not completing the entire work.
I genuinely just want to help people who ask questions. I know you mean well, but instead of reviewing or critiquing other people’s answers, it would be more helpful to focus on giving the best possible answer to the OP. I know you are an OutSystems MVP — you’re the best — and I’m sure you will provide a great answer to the person asking the question.
Peter Hieu.
Hi Peter,
Some MVP's have a role of Forum moderator, and in that role, I look at solutions given, and will critique them if they contain non-functioning OML's, or advise against best practices, or don't add value, or say somthing that is just wrong or in some other way could cause confusion for future forum visitors.
This is not a critique on you, as you are a very active contributor, and as such, create more value for the community than 98 % of the people in it. It is however an effort to keep the quality of the forum high.
I understand now, thank you for explaining it to me.