# Making a svg clickable

**URL:** https://discourse.nodered.org/t/making-a-svg-clickable/93336
**Category:** Dashboard
**Created:** [22 November 2024 07:35 UTC](https://discourse.nodered.org/t/making-a-svg-clickable/93336 "2024-11-22T07:35:58Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)
#### Post date: [22 November 2024 07:35 UTC](https://discourse.nodered.org/t/making-a-svg-clickable/93336/1 "2024-11-22T07:35:58Z")

</div>

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.

```xml
<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.

```xml
<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?

---

<div class="post-metadata">

### Author: ![lori](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lori/32/85597_2.png) [@lori](https://discourse.nodered.org/u/lori)
#### Post date: [22 November 2024 08:09 UTC](https://discourse.nodered.org/t/making-a-svg-clickable/93336/2 "2024-11-22T08:09:13Z")

</div>

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

```xml
<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>

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 December 2024 08:09 UTC](https://discourse.nodered.org/t/making-a-svg-clickable/93336/3 "2024-12-22T08:09:43Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.