0

我正在创建一个使用 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>

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

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

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

您会建议我以哪种方式尝试解决此问题，我应该研究什么？

这是我的完整代码：

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

4

1 回答 1

-3

您可以坚持使用 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;
}
于 2015-01-21T21:14:29.343 回答