How to get onclick working on emdedded SVG images

Question

<embed id="bottom" src="img/model/skirt.svg" onclick="control.colorClothes(this)" title="bottom" type="image/svg+xml" width="325" height="500"> </embed>

I want to cause an event to fire on a mouse click.
The above works if I use onload and onmouseover, but not onclick or onmouseup/down.

Any thoughts?

** Edit **

My thanks to the posters. The code I was looking for is
onload="this.getSVGDocument().onclick = function(event){alert(333);};"

It overcomes three separate problems.

The delay in loading the svg file causing issues with code trying to execute on an svg file that didn't exist yet.
That the onclick event has to be attached to the svg element. I'm not sure why, Tanzeels post showed this & my experiments confirmed it.
The way I was trying to write the onclick="alert(333)" wasn't working. The above does. Again I'm not sure why, but at this point I'm just happy to go with the flow.

have you tried something more like: `onclick="javascript:control.colorClothes(this)"` — Renato Gama, Dec 07 '12 at 03:23
No, but just gave it a go. It had no effect. Ta for the suggestion though. — Matt Stevens, Dec 07 '12 at 03:25
you might not want to, but try attaching the event using jQuery and see if that helps — kennypu, Dec 07 '12 at 03:28
this might help: http://stackoverflow.com/questions/9945265/add-click-event-on-elements-of-an-embedded-svg-in-javascript it looks like when embedding svg, you can't call onclick on the embed itself, you gotta do workarounds. — kennypu, Dec 07 '12 at 03:30
I've had a go using jquery, but thats not working and I've had a look at the thread you pointed to. It strikes me that the problem they are solving is far more difficult than mine meaning there is a lot of noise & I'm not yet up to that level. Frustratingly from what I've read elsewhere embed should be able to handle events and it does handle at least two, but it seems not mouseclick events. — Matt Stevens, Dec 07 '12 at 04:15

score 3 · Accepted Answer · answered Dec 07 '12 at 05:57

You will need to assign the click handler onto the SVG. Do something on the following lines:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function getClick(event) {
            var clickedElement = event.target;
            alert(clickedElement);
            //console.log(clickedElement);
            return;
        }

        function addClick() {
            var embedObj = document.getElementById("bottom");
            embedObj.getSVGDocument().onclick = function (event) {
                return getClick(event);
            };
            return;
        }
    </script>
</head>
<body onload="addClick();">
    <embed id="bottom" src="img/model/skirt.svg" title="bottom" type="image/svg+xml"
        width="628" height="709"></embed>
</body>
</html>

The event.target will return the SVG node that was clicked.

Note that this approach will not work for cross-domain SVG resources as the browser will throw a permission denied error when assigning the onclick event handler.

Thanks for the above, it put me on the track of realising I had three problems. I'll detail them in an edit on my post above, but the answer is `onload="this.getSVGDocument().onclick = function(event){alert(333);};"` much appreciated. — Matt Stevens, Dec 07 '12 at 06:37

score 0 · Answer 2 · answered Dec 07 '12 at 04:33

0

it might be worth trying to wrap the embed tag in a div and put the onclick handler on that. I'm not sure if click events bubble out of svgs into the normal DOM but if they do then you should be ok. Like this:

<div onclick="control.colorClothes(this)"><embed id="bottom" src="img/model/skirt.svg" onclick="control.colorClothes(this)" title="bottom" type="image/svg+xml" width="325" height="500"></embed></div>

answered Dec 07 '12 at 04:33

Damon Smith

1,770
18
24

also note that if you call control.colorClothes(this) then the function won't be called as a method of the "control" object, it will just be called as a standalone function. If you want to reference other members of the control object you'll need to bind it some other way or wrap the onclick handler in a function, or use a library like jquery to bind the handler to the method. – Damon Smith Dec 07 '12 at 04:35
It definitely seems to be related to using an svg, but then again why does onmouseover work but not onmousedown or onclick. I've tried using the div tag and a new stand-alone test function (ie: not an object method), still not working. – Matt Stevens Dec 07 '12 at 05:16

How to get onclick working on emdedded SVG images

2 Answers2