Add interaction to an existing Inkscape svg file

Question

I have created an svg file using Inkscape to draw a data visualisation diagram. Now I would like to add an interaction that shows a tooltip when user hovers over a group, and the final product will be added to a website.

The tooltip is something similar to this

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Test</title>
        <style>
            #tooltip {
            background: cornsilk;
            border: 1px solid black;
            border-radius: 5px;
            padding: 5px;
            }
        </style>
    </head>

    <body>
        <script>
            function showTooltip(evt, text) {
            let tooltip = document.getElementById("tooltip");
            tooltip.innerHTML = text;
            tooltip.style.display = "block";
            tooltip.style.left = evt.pageX + 10 + 'px';
            tooltip.style.top = evt.pageY + 10 + 'px';
            }

            function hideTooltip() {
            var tooltip = document.getElementById("tooltip");
            tooltip.style.display = "none";
            }
        </script>

        <div id="tooltip" display="none" style="position: absolute; display: none;"></div>

        <svg>
        <rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
        </rect>
        </svg>
    </body>
</html>

Below is my original svg image. The original file is 4500+ lines when shown on VS Code Origial svg image

I have tried manipulating object properties in Inkscape Adding interactions in Inkscape

I also searched around and referenced Including JavaScript in SVG and ended up with

<svg
...
<script
     type="text/javascript"
     id="script2"><![CDATA[
         function showTooltip(evt, text) {
            let tooltip = document.getElementById("tooltip2626");
            tooltip.innerHTML = text;
            tooltip.style.display = "block";
            tooltip.style.left = evt.pageX + 10 + 'px';
            tooltip.style.top = evt.pageY + 10 + 'px';
         }

         function hideTooltip() {
            var tooltip = document.getElementById("tooltip2626");
            tooltip.style.display = "none";
         }
      
      ]]></script>
  <defs
     id="defs6">
    <style
       type="text/css"
       id="style4"><![CDATA[
            #tooltip2626 {
            background: cornsilk;
            border: 1px solid black;
            border-radius: 5px;
            padding: 5px;
            }
         ]]></style>
  </defs>
...
<div id="tooltip2626" display="none" style="position: absolute; display: none;"></div>
<div
       id="tooltip2626"
       display="none"
       style="position: absolute; display: none;" />
...

However I barely understand javascript so it failed too.

I would like to know whether there is a solution to this issue, whether through coding or through other means.

@pierfarrugia https://drive.google.com/file/d/1ntRkexTlEgHxLZvcXNRCNPD2TT5mqkBM/view?usp=sharing — Hokuto, Nov 29 '22 at 14:04

score 0 · Answer 1 · answered Nov 29 '22 at 15:43

I've downloaded your svg to check it.

First thing is it's inkscape svg format not "plain" svg. You can save it in plain svg from inkscape in save dialog, choose plain svg. From your actual 216k, it's 188k.

To use in html, better is to embed it in your page.

In inkscape, if you open the XML editor, Edit -> XML Editor, you can see all your svg elements.

If you click, for example, on the top left round grey, you see in XML Editor that it's the id="g2631"... and so on for all the elements in the svg.

You can leave those ID like that, or change to something more "friendly". Changes can be done directly in inkscape in the xml editor, or if you prefer you open the svg in text editor, but you'll have to remember which elements you have to change.

Save in plain svg

Embed in your HTML

Now you have just to write the tooltip function for #g2631 (or the name you gave) and all others elements you want to fire a tooltip.

You can also when in inkscape (or in text editor) add a class. In XML editor, you have a + to add. Add a class "tooltip" (or something else) for all the elements you want to fire a tooltip (plus a data-nb to have tooltip number to fire). Easier to write a function which select all class .tooltip and fire the right one regarding it's attribute nb

Add interaction to an existing Inkscape svg file

1 Answers1