1

I am trying to target elements in an SVG file, this is what I've done in testing:

<!DOCTYPE html>
<html>
    <head>
        <title>UI frontpage</title> 
    </head>
    <body>

        <object data="covidmap.svg" type="image/svg+xml"
         id="covidmapsvg" width="100%" height="100%"></object>

        <script>
            var a = document.getElementById("covidmapsvg");

            // add a load event listener to the object,
            // it will load the svg doc asynchronously
            a.addEventListener("load",function(){

                // get the inner DOM of covidmap.svg
                var svgDoc = a.contentDocument;
                // get the inner element by id
                var uiMap = svgDoc.getElementById("chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9");
                // add behaviour
                uiMap.addEventListener("mousedown",function(){
                        alert('hello world!')
                }, false);
            }, false);
        </script>
    </body>
</html>

For some reason I get

Uncaught TypeError: Cannot read property 'getElementById' of null
    at HTMLObjectElement.<anonymous> (index.html:21)

The first few lines of my svg document are as follows:

xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9" class="pygal-chart" viewBox="0 0 800 600"><!--Generated with pygal 2.4.0 (lxml) ©Kozea 2012-2016 on 2021-09-07--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9{background-color:rgba(249,249,249,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 path,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 rect,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .graph &gt; .background{fill:rgba(249,249,249,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .plot &gt; .background{fill:rgba(255,255,255,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .graph{fill:rgba(0,0,0,.87)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 text.no_data{fill:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .title{fill:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .legends .legend text{fill:rgba(0,0,0,.87)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .legends .legend:hover text{fill:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis .line{stroke:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis .guide.line{stroke:rgba(0,0,0,.54)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis .major.line{stroke:rgba(0,0,0,.87)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis text.major{fill:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.y .guides:hover .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .line-graph .axis.x .guides:hover .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .stackedline-graph .axis.x .guides:hover .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis .guides:hover text{fill:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .reactive{fill-opacity:.7;stroke-opacity:.8}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .ci{stroke:rgba(0,0,0,.87)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .reactive.active,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .ci .reactive.active{stroke-width:1.5}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .series text{fill:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip rect{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip .legend{font-size:.8em;fill:rgba(0,0,0,.54)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,1)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip .xlink{font-size:.5em;text-decoration:underline}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip .value{font-size:1.5em}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .bound{font-size:.5em}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .max-value{font-size:.75em;fill:rgba(0,0,0,.54)}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .map-element{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,.54) !important}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .color-0,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .color-0 a:visited{stroke:#F44336;fill:#F44336}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .text-overlay .color-0 text{fill:black}
#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 text.no_data{text-anchor:middle}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .guide.line{fill:none}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .centered{text-anchor:middle}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .title{text-anchor:middle}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .legends .legend text{fill-opacity:1}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.x text{text-anchor:middle}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.x:not(.web) text[transform]{text-anchor:start}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.x:not(.web) text[transform].backwards{text-anchor:end}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.y text{text-anchor:end}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.y text[transform].backwards{text-anchor:start}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.y2 text{text-anchor:start}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.y2 text[transform].backwards{text-anchor:end}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis .guide.line{stroke-dasharray:4,4}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis .major.guide.line{stroke-dasharray:6,6}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .horizontal .axis.y .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .horizontal .axis.y2 .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .vertical .axis.x .guide.line{opacity:0}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .horizontal .axis.always_show .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .vertical .axis.always_show .guide.line{opacity:1 !important}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.y .guides:hover .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.y2 .guides:hover .guide.line,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis.x .guides:hover .guide.line{opacity:1}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .axis .guides:hover text{opacity:1}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .nofill{fill:none}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .subtle-fill{fill-opacity:.2}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .dot{stroke-width:1px;fill-opacity:1}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .dot.active{stroke-width:5px}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .dot.negative{fill:transparent}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 text,#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 tspan{stroke:none !important}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .series text.active{opacity:1}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip rect{fill-opacity:.95;stroke-width:.5}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .tooltip text{fill-opacity:1}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .showable{visibility:hidden}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .showable.shown{visibility:visible}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .gauge-background{fill:rgba(229,229,229,1);stroke:none}#chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9 .bg-lines{stroke:rgba(249,249,249,1);stroke-width:2px}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config['09f74869-90e8-4fbe-ab04-8ff9df7930c9'] = {"allow_interruptions": false, "box_mode": "extremes", "classes": ["pygal-chart"], "css": ["file://style.css", "file://graph.css"], "defs": [], "disable_xml_declaration": false, "dots_size": 2.5, "dynamic_print_values": false, "explicit_size": false, "fill": false, "force_uri_protocol": "https", "formatter": null, "half_pie": false, "height": 600, "include_x_axis": false, "inner_radius": 0, "interpolate": null, "interpolation_parameters": {}, "interpolation_precision": 250, "inverse_y_axis": false, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "legend_at_bottom": false, "legend_at_bottom_columns": null, "legend_box_size": 12, "logarithmic": false, "margin": 20, "margin_bottom": null, "margin_left": null, "margin_right": null, "margin_top": null, "max_scale": 16, "min_scale": 4, "missing_value_fill_truncation": "x", "no_data_text": "No data", "no_prefix": false, "order_min": null, "pretty_print": false, "print_labels": false, "print_values": false, "print_values_position": "center", "print_zeroes": true, "range": null, "rounded_bars": null, "secondary_range": null, "show_dots": true, "show_legend": true, "show_minor_x_labels": true, "show_minor_y_labels": true, "show_only_major_dots": false, "show_x_guides": false, "show_x_labels": true, "show_y_guides": true, "show_y_labels": true, "spacing": 10, "stack_from_top": false, "strict": false, "stroke": true, "stroke_style": null, "style": {"background": "rgba(249, 249, 249, 1)", "ci_colors": [], "colors": ["#F44336", "#3F51B5", "#009688", "#FFC107", "#FF5722", "#9C27B0", "#03A9F4", "#8BC34A", "#FF9800", "#E91E63", "#2196F3", "#4CAF50", "#FFEB3B", "#673AB7", "#00BCD4", "#CDDC39", "#9E9E9E", "#607D8B"], "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "foreground": "rgba(0, 0, 0, .87)", "foreground_strong": "rgba(0, 0, 0, 1)", "foreground_subtle": "rgba(0, 0, 0, .54)", "guide_stroke_dasharray": "4,4", "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "legend_font_size": 14, "major_guide_stroke_dasharray": "6,6", "major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "no_data_font_size": 64, "opacity": ".7", "opacity_hover": ".8", "plot_background": "rgba(255, 255, 255, 1)", "stroke_opacity": ".8", "stroke_opacity_hover": ".9", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_size": 14, "transition": "150ms", "value_background": "rgba(229, 229, 229, 1)", "value_colors": [], "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_font_size": 16, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_label_font_size": 10}, "title": "Cases per 100 000 people in the last month, click on a country for more info.", "tooltip_border_radius": 0, "tooltip_fancy_mode": true, "truncate_label": null, "truncate_legend": null, "width": 800, "x_label_rotation": 0, "x_labels": ["ad", "ae", "af", "al", "am", "ao", "aq", "ar", "at", "au", "az", "ba", "bd", "be", "bf", "bg", "bh", "bi", "bj", "bn", "bo", "br", "bt", "bw", "by", "bz", "ca", "cd", "cf", "cg", "ch", "ci", "cl", "cm", "cn", "co", "cr", "cu", "cv", "cy", "cz", "de", "dj", "dk", "do", "dz", "ec", "ee", "eg", "eh", "er", "es", "et", "fi", "fr", "ga", "gb", "ge", "gf", "gh", "gl", "gm", "gn", "gq", "gr", "gt", "gu", "gw", "gy", "hk", "hn", "hr", "ht", "hu", "id", "ie", "il", "in", "iq", "ir", "is", "it", "jm", "jo", "jp", "ke", "kg", "kh", "kp", "kr", "kw", "kz", "la", "lb", "li", "lk", "lr", "ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mg", "mk", "ml", "mm", "mn", "mo", "mr", "mt", "mu", "mv", "mw", "mx", "my", "mz", "na", "ne", "ng", "ni", "nl", "no", "np", "nz", "om", "pa", "pe", "pg", "ph", "pk", "pl", "pr", "ps", "pt", "py", "re", "ro", "rs", "ru", "rw", "sa", "sc", "sd", "se", "sg", "sh", "si", "sk", "sl", "sm", "sn", "so", "sr", "st", "sv", "sy", "sz", "td", "tg", "th", "tj", "tl", "tm", "tn", "tr", "tw", "tz", "ua", "ug", "us", "uy", "uz", "va", "ve", "vn", "ye", "yt", "za", "zm", "zw"], "x_labels_major": null, "x_labels_major_count": null, "x_labels_major_every": null, "x_title": null, "xrange": null, "y_label_rotation": 0, "y_labels": null, "y_labels_major": null, "y_labels_major_count": null, "y_labels_major_every": null, "y_title": null, "zero": 1, "legends": ["low number of cases"]}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"/></defs><title>Cases per 100 000 people in the last month, click on a country for more info.</title><g class="graph world-graph vertical"><rect x="0" y="0" width="800" height="600" class="background"/><g transform="translate(168, 72)" class="plot"><rect x="0" y="0" width="612.0" height="508" class="background"/><svg version="1.1" viewBox="0 0 2475 1388" width="612.0" height="508">
  <g id="countries">
    <g class="ad country map-element color-0 serie-0 series" style="fill-opacity: 1.000000">
      <path d="m1217.5 316.32c0.5-0.72 1.8-0.37 2.3 0.29-0.5 0.64-1.3 0.98-2.1 1.08 0-0.47-0.1-0.92-0.2-1.37" class=" reactive tooltip-trigger map-area"/>
    <desc class="value">Andorra: 0</desc><desc class="x auto">0</desc><desc class="y auto">0</desc></g>
    <g class="ae country map-element color-0 serie-0 series" style="fill-opacity: 1.000000">
      <path d="m1603 475.87c0.5 0.03 0.9-0.16 1.2-0.57-0.7-0.54-1.5-0.42-1.9 0.36 0.2 0.07 0.5 0.14 0.7 0.21" class=" reactive tooltip-trigger map-area"/>
      <path d="m1586.4 474.58c0.5-0.33 0.7-0.14 0.6 0.57 0.2-0.22 0.4-0.44 0.7-0.65 0.4 0.69 0 1.67 0.6 2.31 0.5 0.61 1.6 0.47 2.3 0.43 0.9-0.05 1.7-0.19 2.4-0.82 0.3-0.28 0.7-1.1 1.1-1.2 0.5-0.1 1.6 0.6 2.2 0.61 0.9 0.02 1.8 0.13 2.8 0.1 2.5-0.09 4.2 1.07 6.7-0.42-0.2-0.34-0.4-0.68-0.7-1.01 0.8-0.29 0.7 0.65 1.3 0.58 0.9-0.1 1.7-1.18 2-1.9 1-1.96 1.1-3.07 2.9-4.53 1.7-1.41 2.4-3.97 4-5.29 1.8-1.47 2.8-1.86 3.3-4.26 1.3 0.06 0.8 1.94 0.8 2.72 0 1.5 1.6 0.74 1.8 2.4 0.2 1.67 1.4 3.84 0 5.13-2.8 2.75-1.9 0.83-2.3-0.35-0.4-1.15-1.3 0.96-1.2 1.67 0.1 0.53-0.1 0.54 0 1.12 0.1 0.61 0.5 1.53 0.5 2.26 0 2.01 2 1.1 1.2 2.45-0.6 1.07-2.8 0.13-3.6 1.1 1.9 1.05-0.9 5.97-1.2 8.99 0.1 1.98-0.9 2.43-2.7 2.03-2.1-0.5-4.3-0.7-6.4-1.02-2.3-0.34-4.5-0.67-6.8-0.95-1.7-0.21-3.6 0.12-4.8-1.36-1.1-1.5-2.2-3.02-3.4-4.49-0.8-1.02-1.6-2.02-2.5-3.04-0.8-1.03-1-2.09-1.6-3.18" class=" reactive tooltip-trigger map-area"/>
    <desc class="value">United Arab Emirates: 0</desc><desc class="x auto">0</desc><desc class="y auto">0</desc></g>
...
...
...

Any ideas as to what I'm doing wrong here?

My reference for what I was doing: How to access SVG elements with Javascript

I never got this to work as such.

WORKAROUND:

after inserting a script to the SVG file with <script xlink:href="test.js"></script> I used a python script to replace the <g> elements with <a href> elements. This allowed me to use the hyperlinks to directly target the script from inside the SVG.

For my purposes this is a working solution, as all I was trying to achieve was getting a click activated script to each element of my SVG map.

Nniinima
  • 33
  • 5

1 Answers1

0

If you want to achieve that, you must embed your SVG in your HTML (using a fetch request in JavaScript or writing the svg file content directly where you want it to be before serving your HTML page).

When used as an src, the SVG code is not in the DOM. The browser just render it as a regular linked picture.

So, you have to do something like :


<!DOCTYPE html>
<html>
    <head>
        <title>UI frontpage</title> 
    </head>
    <body>

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="chart-09f74869-90e8-4fbe-ab04-8ff9df7930c9" class="pygal-chart" viewBox="0 0 800 600"><!--Generated with pygal 2.4.0 (lxml) ©Kozea 2012-2016 on 2021-09-07--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css"> ....... 
        </svg>

        <script>
           //...
        </script>
    </body>
</html>

Or :


async function fetchSVG(url){
    const rawSvg = await fetch(url).then(resp => resp.text());
    const svgTemplate = document.createElement('template');
    svgTemplate.innerHTML = rawSvg;
    return svgTemplate.content;
}

fetchSvg('http://example.com/svg/some-svg.svg')
    .then(elem => document.body.appendChild(elem));

Edit : Since I don't usually use <object> tags for svg, I didn't answered to the question. One of the many things that can happen there is that the svg is not served through a webserver but opened directly into a browser (through file:// protocol) or that the access policies of the webserver is to restrictive.

Jordan Breton
  • 1,167
  • 10
  • 17
  • This would seem to be in conflict with https://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript Which I should have put in the original question as a point of reference. Edited it in now. – Nniinima Sep 08 '21 at 13:27
  • If you want to use this kind of SVG import, it will not work until you use a webserver. Access policies can also prevent you to access the SVG content depending of the headers that the server include while serving the SVG file. However, the question is : do you use a webserver to serve your svg ? – Jordan Breton Sep 08 '21 at 13:39
  • I'm using a local development environment using "Preview on Web Server" extension on VSCode. Accessing it with something like: http://localhost:8080/web/index.html – Nniinima Sep 08 '21 at 13:47
  • Where is located your svg file ? As you linked it, it should be located at localhost:8080/web/ui_map/covidmap.svg. – Jordan Breton Sep 08 '21 at 13:48
  • Oh. Ok. Then your test environment is the browser (chrome, firefox ?) or the vscode preview ? – Jordan Breton Sep 08 '21 at 13:49
  • Chrome, using VSCode preview to launch the server and then access it via Chrome. The svg I am using has mouseover hover features on parts of it, so it works at least partially, but those features are from the svg itself and not scripted by me (It's generated via a custom python script with pygal python library, but I don't believe that has relevance other than that the interactivity is workable. I just don't seem to know what I'm doing.) The SVG file is hosted in correct location. – Nniinima Sep 08 '21 at 13:55
  • So the svg is correctly displayed. Does Chrome prompt you something in the console ? (your error aside) – Jordan Breton Sep 08 '21 at 14:00
  • Nothing else comes up. – Nniinima Sep 08 '21 at 14:08
  • I just tried your demo on a Chrome browser and it works just fine with your code while I serve the files with an apache server. Can you try to use another webserver (apache, nginx) to see if this comes from the vscode webserver ? – Jordan Breton Sep 08 '21 at 14:23
  • Apache test server http://35.239.183.118/ When you click on any part of the image, you should get a "Hello world", alert, it doesn't seem to work for me, but if you look in the console, you get: Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLObjectElement. ((index):18) – Nniinima Sep 09 '21 at 06:30
  • You get that because there is no element in your SVG that have the id "chart-97bdd417-fc4f-4682-b397-90a9108c2eb8". So getElementById() is null. – Jordan Breton Sep 09 '21 at 20:18