title: How to add a link inside an svg circle
body: <p>I have drawn a circle using svg. This circle has a hover effect. I would like to add a link within in the circle and for the link text to change color along with the hover effect. 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg#circle {
    height: 250px;
    width: 250px;
  }
  
  circle {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    stroke-linecap: butt;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
  }
  
  circle:hover {
    fill: pink;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 10;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="circle"&gt;
          &lt;circle cx="125" cy="125" r="100" stroke="darkblue" stroke-width="3"     fill="green" /&gt;
       &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>