Making a svg clickable

Dashboard
1

Hi,

i have a huge dashboard for my KNX based home automation. Therefor I show svg elements in a template node, depending on a input node (e.g. light is on or off).
This looks like this.

<svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32">
    <path d="{{msg.payload}}" />
</svg>

No I want the svg to be clickable and to send the msg to the output node of the template node. For that I connected the output to a debug node and changed to code to that.

<div id="mySvgButtonId" style="cursor: pointer; display: inline-block;">
    <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32">
        <path d="{{msg.payload}}" />
    </svg>
</div>

<script>
    (function(scope) {
        console.warn('Function reached');
        document.getElementById('mySvgButtonId').onclick = function() {
            // Send the message to the output
            scope.send(scope.msg);
            console.warn('svg clicked');
        }
    })(this);
</script>

Now the svg appears to be clickable (the mouse pointer changes once I hover over the svg) but once I click the svg, no message is send to the output/debug node at all.
Does anybody know what is wrong with the code and has an idea how to fix this?

2

After several changes I finally found a solution. I needed to surround the function(scope) by another function.

<div id="{{'div' + $id}}" style="cursor: pointer; display: inline-block;">
    <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32">
        <path d="{{msg.payload}}" />
    </svg>
</div>
<script>
(function(scope) {
    $(function() {
        var svg = document.getElementById('div' + scope.$id);
        svg.addEventListener('click', function(event) {
            scope.send(scope.msg);
        });
    });
})(scope);
</script>