How to dynamically create links from SVG paths using Javascript

Question

Dynamic links to svg paths don't render, but show up in Chrome's inspector

I have an SVG file with hundreds of paths that contain IDs. I wrote some javascript to extract the ID from each path and wrap it in a link. When I look at the inspector in Chrome, my code works, but it's not rendering on the page as clickable links. I read somewhere that it's because it's SVG and not HTML but I can't find any way to fix this.

SVG File

<svg id="shapes" data-name="shapes" xmlns="http://www.w3.org/2000/svg" width="58.7" height="218.6" viewBox="0 0 58.7 218.6"><title>shapes</title><path id="circle" d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z" transform="translate(-120.3 -28.1)"/><path id="square" d="M167.6,117.1a354.3,354.3,0,0,1,2.3,53.5,193.3,193.3,0,0,1-43-1.2c-1.8-9.3-10.9-44.1-4.1-51.3C126,114.6,167.7,117.7,167.6,117.1Z" transform="translate(-120.3 -28.1)"/><path id="triangle" d="M127.1,246.7c2.4-2.6,6.4-2.7,9.9-2.7h42c-2.2,0-12.4-20.8-14.1-23.6-2.8-4.5-9.6-20.8-15.7-21.4S130.4,239.6,127.1,246.7Z" transform="translate(-120.3 -28.1)"/></svg>

Javascript

            $(document).ready(function(){

            var $array = [];
            $('path[id]').each(function(){

                var id = $(this).attr('id');

                $(this).wrap( "<a href="+"https://www.google.com/search?q="+id+"></a>" );

                $array.push(id);

            });
            console.log($array);


            });

Each shape is supposed to be a clickable link to the dynamic value extracted from the ID. When I run the code, the shapes disappear from the canvas but in Chrome's inspector I'm seeing the desired result.

<svg id="shapes" data-name="shapes" xmlns="http://www.w3.org/2000/svg" width="58.7" height="218.6" viewBox="0 0 58.7 218.6"><title>shapes</title>
<a href="https://www.google.com/search?q=circle"><path id="circle" d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z" transform="translate(-120.3 -28.1)"></path></a>
<a href="https://www.google.com/search?q=square"><path id="square" d="M167.6,117.1a354.3,354.3,0,0,1,2.3,53.5,193.3,193.3,0,0,1-43-1.2c-1.8-9.3-10.9-44.1-4.1-51.3C126,114.6,167.7,117.7,167.6,117.1Z" transform="translate(-120.3 -28.1)"></path></a>
<a href="https://www.google.com/search?q=triangle"><path id="triangle" d="M127.1,246.7c2.4-2.6,6.4-2.7,9.9-2.7h42c-2.2,0-12.4-20.8-14.1-23.6-2.8-4.5-9.6-20.8-15.7-21.4S130.4,239.6,127.1,246.7Z" transform="translate(-120.3 -28.1)"></path></a></svg>

Here's a link to my code: https://jsfiddle.net/L5d8oufj/

please see my answer : this is because you din't add a correct nameSpace element = https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS — Mister Jojo, May 02 '19 at 21:52

Mister Jojo · Answer 1 · 2019-05-02T21:32:16.537

Because you're asking for a javascript answer :
and because SVG element are in a different NameSpace witch is that matter

window.onload =()=>{

  const NamSpace= 'http://www.w3.org/2000/svg';
  let $array = [];

  document.querySelectorAll('#shapes path').forEach(el=>{

    $array.push(el.id)

    const wrapper = document.createElementNS(NamSpace,'a');

    wrapper.setAttribute( 'href', `https://www.google.com/search?q=${el.id}`);

    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);
  })

  console.log($array);
}

<svg id="shapes" data-name="shapes" width="58.7" height="218.6" viewBox="0 0 58.7 218.6">
  <title>shapes</title>
  <path id="circle"
    d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z"
    transform="translate(-120.3 -28.1)"/>
  <path id="square"
    d="M167.6,117.1a354.3,354.3,0,0,1,2.3,53.5,193.3,193.3,0,0,1-43-1.2c-1.8-9.3-10.9-44.1-4.1-51.3C126,114.6,167.7,117.7,167.6,117.1Z"
    transform="translate(-120.3 -28.1)"/>
  <path id="triangle"
    d="M127.1,246.7c2.4-2.6,6.4-2.7,9.9-2.7h42c-2.2,0-12.4-20.8-14.1-23.6-2.8-4.5-9.6-20.8-15.7-21.4S130.4,239.6,127.1,246.7Z"
    transform="translate(-120.3 -28.1)"/>
</svg>

Alen.Toma · Answer 2 · 2019-05-03T06:49:07.067

Well, you already have one solution @MrJ provided, and here is also another solution you may like.

Read the comment below.

$(document).ready(function(){
       var $array = [];
       $('path[id]').each(function(){
       var id = $(this).attr('id');
       $(this).addClass("lnk") // this will make it clickable links
       $(this).click(function(){// now handle the click event
          window.location.href = "https://www.google.com/search?q="+id+"";
       });
       $array.push(id);
});

});

.lnk{
cursor: pointer;
}

.lnk:hover{
fill: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="shapes" data-name="shapes" xmlns="http://www.w3.org/2000/svg" width="58.7" height="218.6" viewBox="0 0 58.7 218.6"><title>shapes</title><path id="circle" d="M129.6,31.5c-3.1,2.2-4,6.5-4.6,10.3-1,5.9-1.9,11.8-1.3,17.8s2.8,11.9,7.3,15.8c7.7,6.6,20.7,4.8,27.4-2.8,3.9-4.5,5.8-10.2,7.6-15.8,2.9-9,3.8-21.1-5.8-26.4C153.9,26.9,135.1,27.7,129.6,31.5Z" transform="translate(-120.3 -28.1)"/><path id="square" d="M167.6,117.1a354.3,354.3,0,0,1,2.3,53.5,193.3,193.3,0,0,1-43-1.2c-1.8-9.3-10.9-44.1-4.1-51.3C126,114.6,167.7,117.7,167.6,117.1Z" transform="translate(-120.3 -28.1)"/><path id="triangle" d="M127.1,246.7c2.4-2.6,6.4-2.7,9.9-2.7h42c-2.2,0-12.4-20.8-14.1-23.6-2.8-4.5-9.6-20.8-15.7-21.4S130.4,239.6,127.1,246.7Z" transform="translate(-120.3 -28.1)"/></svg>

How to dynamically create links from SVG paths using Javascript

2 Answers2