smooth scrolling with link inside svg, or rescaling text, what should I try?

Question

I'm creating a website using an SVG as header/nav. At first I created the hyperlink text inside the svg, like this:

    <a xlink:href="">
        <text transform="matrix(1 0 0 1 495 160)"  
        font-family="'Ubuntu'" font-size="22">Contact</text>
    </a>

but when I added a jquery scroll to it, I found out that that doesn't work on xlinks.

To fix this I decided to make the text have absolute positioning to overlay the svg, adding this to my style:

#menu {
    position:absolute;
    top:25%;
    left:60%;
    width:100%;
}

and have the items as list:

 <ul id="menu">
        <li><a id="welkom" href="#tex" title="Welkom">Welkom</a></li>
        <li><a id="missie" href="" title="Missie">Missie</a></li>
        <li><a id="links" href="" title="Links">Links</a></li>
    </ul>

I've got it to work, but only on a 1980px wide window, because the svg as a whole rescales and the text doesn't follow the same pattern. http://fiddle.jshell.net/78eh5u52/9/show/

But I prefer the way the "contact" button is showing, since that rescales along with the svg, but as you can see in the fiddle the smooth scroll effect doesn't apply to that

There should be two ways to fix this: I either revert to placing the text inside the svg and find a way to get the scroll effect working on that. Or I figure out how to make the text size and position scale exactly like the underlying svg (svg on top of svg?)

Which way would you advice me to try to fix this and what should I look into?

here's my full code:

http://jsfiddle.net/78eh5u52/9/

Answer 1

You can stick with the svg to make your links smooth-scroll. Instead of using jquery smooth-scroll you can just write your own custom function that does the scrolling. And that you can easily call from your svg.

Your jquery function could look like this. You can just embed it into your html with script-tags:

function scrollTo(target){
  $('html,body').animate({
    scrollTop: $(target).offset().top
  }, 1000);
  return false;
}

And then you can call this from the svg like this:

<a onclick="top.scrollTo('#someIdInYourCode')" class="link">
  <text transform="matrix(1 0 0 1 495 160)"  
  font-family="'Ubuntu'" font-size="22">Contact</text>
</a>

Notice the top. in the code, so it can find your function. Finally, if you want to have the mousecursor changed, you should add some css:

.link {
  cursor: pointer;
}