0

SVG をヘッダー/ナビゲーションとして使用して Web サイトを作成しています。最初に、次のように、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とともに再スケーリングされるためですが、フィドルでわかるように、スムーズスクロール効果はそれに適用されません

これを修正する方法は 2 つあります。テキストを 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 に答える