Hello together,
is it possible to call a javascript script within an inline SVG?
The SVG code would looke like something like this:
"<svg height=""100"" width=""350"" fill=""yellow""> <circle cx=""50"" cy=""50"" r=""30"" stroke=""red"" stroke-width=""25"" fill=""white"" onclick=""alert('You have clicked the circle.')""/>
Instead of an alert I would like to call a predefined script.
Best regards
Hi Dimitri,I think I saw your comment come by in the other post about a similar situation. I gave an answer there you might want to try.Basically:
You can create an OnReady event on your page. Add a Javascript block and define a function that you call with your onclick event. And in that function add the action you want to create pre-pended with "$action."
function MyClickFunction(){ $action.MyActionHere(); }
Kind regards,Eric
Hi Dimitri,
I just did a PoC and put it working. I noticed the approach I had suggested wouldn't work, so below the steps I did:
1. Check the HTML element you want to have it clickable. You want to have the circle inside the svg element clickable:
2. The only thing you need to add now is to identify the element by its selector ("svg circle") and add a click listener when the page loads to that element.
Notice that when the element will be clicked, I will trigger the client action Handler_OnSVGClick which just has a message.
I attach my working OML so you can check it working and take any doubts you might have.
Kind Regards,João
Probably simpler, I would wrap the SVG in a container and use the onclick event to trigger a client action.
Needless to say that on that client action, you can run the logic you need, including a JavaScript node:
Thank you for your answer João,
Using a div with a link will end up in a clickable rectangle. But I would like to have a indiviudal clickable shape.
Best regardsDimitri
Ok, I see your point.
What I would try then would be to fill in a class in the ExtendedClass attribute, and with JavaScript on the OnReady screen event, find that element by the given class and add a listener to it.
Thank you for your both questions. But I still can't find a solution in the forum. Sorry for bothering you!My inline SVG looks now like:
The Javascript block in the OnReady Event looks like this:
But where can I put now a connection between the MyClickFunction() and Class1?
Thank you for your effort!
Dimitri
You add the onclick="MyClickFunction()" in the circle tag.
Kind regards,
Eric(Edit. Most certainly check out João's solution as he tends to be a smarter man then I am)
Thank you both for your effort! Your short app, João, works completely perfect!