Search code examples
htmlcsssvgclickanchor

How to make all the space near a group of SVG paths into a clickable link, not just the SVG stroke itself?

I have several svg <path> elements grouped together into two seperate group <g> elements (IDs are po and ph). Both are inside another group, and everything is inside a single <svg>.

The HTML looks like this:

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="stripped_back_CSS.css" rel="stylesheet">
   </head>
   <body>
      <div id="container">
         <div id="content" class="hide">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
               <style type="text/css">
                  .st5{fill:none;stroke:red;stroke-miterlimit:10;}
               </style>
               <g id="page">
                  <g id="po">
                     <path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
                     <path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
                  </g>
                  <g id="ph">
                     <path class="st5" d="M392.4,522c0,3.2,0.4,6.6,1.1,9.7c-3.7-3.9-2.3-16.4,4.9-11.3c4.1,2.8-3.3,7.3-6.6,5.5"/>
                     <path class="st5" d="M402.8,519.3c1,3.1,0.3,6.4,2.2,9.3"/>
                     <path class="st5" d="M410.5,517.6c-1.2,3.6-0.9,8.7,1.1,12.1"/>
                     <path class="st5" d="M403.9,525.3c1.8-0.8,4-1.9,6-2.2"/>
                  </g>
               </g>
            </svg>
         </div>
      </div>
   </body>
</html>

and the CSS file like this:

#content {
    text-align: center
}

#content svg {
    background: #fff;
    width: auto;
    height: 152vh;
    margin: 8vh 0 8vh 0;
    box-shadow: -9px -9px 20px 0 rgba(0, 0, 0, .12);
    max-width: 90%
}

This produces the following svg characters:

enter image description here

I would like to make each of these groups of text into a clickable link. However, if I try to surround the group tags simply with <a></a> tags then the text stroke is indeed clickable BUT the space between the stroke is not. For example, if the cursor was hovered inside the letter 'O' then at that position nothing is clickable. How can I make the "general area" of each group of characters clickable?

Thank you!

Solution

  • Just add a transparent rect on top, or under, the other elements that you want to treat as a single link. You'll probably find that on top (ie. later in the SVG file) causes fewer issues. See below.

    <g id="po">
  <path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
  <path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
  <a xlink:href="http://www.stackoverflow.com" target="_blank">
    <rect x="382" y="461" width="18" height="14" fill="transparent"/>
  </a>
</g>

    The <a> element could either be around the <rect>, around the <g>, or around all the children of the group. It doesn't really matter.

    #content {
    text-align: center
}

#content svg {
    background: #fff;
    width: auto;
    height: 152vh;
    margin: 8vh 0 8vh 0;
    box-shadow: -9px -9px 20px 0 rgba(0, 0, 0, .12);
    max-width: 90%
}
    <div id="container">
         <div id="content" class="hide">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
               <style type="text/css">
                  .st5{fill:none;stroke:red;stroke-miterlimit:10;}
               </style>
               <g id="page">
                  <g id="po">
                     <path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
                     <path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
                     <a xlink:href="http://www.stackoverflow.com"">
                       <rect x="382" y="461" width="18" height="14" fill="transparent"/>
                     </a>
                  </g>
                  <g id="ph">
                     <path class="st5" d="M392.4,522c0,3.2,0.4,6.6,1.1,9.7c-3.7-3.9-2.3-16.4,4.9-11.3c4.1,2.8-3.3,7.3-6.6,5.5"/>
                     <path class="st5" d="M402.8,519.3c1,3.1,0.3,6.4,2.2,9.3"/>
                     <path class="st5" d="M410.5,517.6c-1.2,3.6-0.9,8.7,1.1,12.1"/>
                     <path class="st5" d="M403.9,525.3c1.8-0.8,4-1.9,6-2.2"/>
                     <a xlink:href="http://www.stackoverflow.com">
                       <rect x="391" y="517" width="21" height="15" fill="transparent"/>
                     </a>
                  </g>
               </g>
            </svg>
         </div>
      </div>