title: How to make all the space near a group of SVG paths into a clickable link, not just the SVG stroke itself?
body: <p>I have several svg <code>&lt;path&gt;</code> elements grouped together into two seperate group <code>&lt;g&gt;</code> elements (IDs are <code>po</code> and <code>ph</code>). Both are inside another group, and everything is inside a single <code>&lt;svg&gt;</code>.</p>
  <p>The HTML looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
     &lt;head&gt;
        &lt;link href=&quot;stripped_back_CSS.css&quot; rel=&quot;stylesheet&quot;&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div id=&quot;container&quot;&gt;
           &lt;div id=&quot;content&quot; class=&quot;hide&quot;&gt;
              &lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 595.3 841.9&quot; style=&quot;enable-background:new 0 0 595.3 841.9;&quot; xml:space=&quot;preserve&quot;&gt;
                 &lt;style type=&quot;text/css&quot;&gt;
                    .st5{fill:none;stroke:red;stroke-miterlimit:10;}
                 &lt;/style&gt;
                 &lt;g id=&quot;page&quot;&gt;
                    &lt;g id=&quot;po&quot;&gt;
                       &lt;path class=&quot;st5&quot; d=&quot;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&quot;/&gt;
                       &lt;path class=&quot;st5&quot; d=&quot;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&quot;/&gt;
                    &lt;/g&gt;
                    &lt;g id=&quot;ph&quot;&gt;
                       &lt;path class=&quot;st5&quot; d=&quot;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&quot;/&gt;
                       &lt;path class=&quot;st5&quot; d=&quot;M402.8,519.3c1,3.1,0.3,6.4,2.2,9.3&quot;/&gt;
                       &lt;path class=&quot;st5&quot; d=&quot;M410.5,517.6c-1.2,3.6-0.9,8.7,1.1,12.1&quot;/&gt;
                       &lt;path class=&quot;st5&quot; d=&quot;M403.9,525.3c1.8-0.8,4-1.9,6-2.2&quot;/&gt;
                    &lt;/g&gt;
                 &lt;/g&gt;
              &lt;/svg&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and the CSS file like this:</p>
  <pre><code>#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%
  }
  
  </code></pre>
  <p>This produces the following svg characters:</p>
  <p><a href="https://i.stack.imgur.com/hYbJL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hYbJL.png" alt="enter image description here" /></a></p>
  <p>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 <code>&lt;a&gt;&lt;/a&gt;</code> tags then the text stroke is indeed clickable BUT the space between the stroke is not. For example, if the cursor was hovered <em>inside</em> the letter 'O' then at that position nothing is clickable. How can I make the &quot;general area&quot; of each group of characters clickable?</p>
  <p>Thank you!</p>