我正在创建一个使用 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 之上?)
您建议我尝试用哪种方式解决这个问题,我应该研究什么?
这是我的完整代码:
最佳答案
您可以坚持使用 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;
}
关于jquery - 使用 svg 内的链接平滑滚动或缩放文本,我应该尝试什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27510633/