jquery - 使用 svg 内的链接平滑滚动或缩放文本，我应该尝试什么？

Question

我正在创建一个使用 SVG 作为页眉/导航的网站。起初我在 svg 中创建了超链接文本，如下所示:

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

但是当我向它添加一个 jquery 滚动时，我发现它在 xlinks 上不起作用。

为了解决这个问题，我决定让文本具有绝对定位以覆盖 svg，并将其添加到我的样式中:

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

并将元素作为列表:

 <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>

我已经让它工作了，但只能在 1980 像素宽的窗口上工作，因为 svg 作为一个整体重新缩放并且文本不遵循相同的模式。 http://fiddle.jshell.net/78eh5u52/9/show/

但我更喜欢“联系人”按钮的显示方式，因为它会随着 svg 重新缩放，但正如您在 fiddle 中看到的那样，平滑滚动效果不适用于此

应该有两种方法来解决这个问题:我要么恢复将文本放在 svg 中，然后找到一种方法来获得滚动效果。或者我弄清楚如何使文本大小和位置缩放与底层 svg 完全一样(svg 在 svg 之上？)

您建议我尝试用哪种方式解决这个问题，我应该研究什么？

这是我的完整代码:

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

Answer 1

您可以坚持使用 svg 以使您的链接平滑滚动。您可以编写自己的自定义函数来执行滚动，而不是使用 jquery smooth-scroll。而且您可以轻松地从您的 svg 调用。

您的 jquery 函数可能如下所示。您可以使用脚本标签将它嵌入到您的 html 中:

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

然后你可以像这样从 svg 中调用它:

<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>

注意顶部。在代码中，所以它可以找到你的功能。最后，如果你想改变鼠标光标，你应该添加一些 css:

.link {
  cursor: pointer;
}