svg 안에 링크가있는 부드러운 스크롤 또는 텍스트 크기를 조정하려면 어떻게해야합니까?

Question

SVG를 header/nav로 사용하여 웹 사이트를 만들고 있습니다. 은 첫째 나는이 같은 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> 

을 ve는 작동 시키지만, 1980px 와이드 창에서만 가능합니다. 왜냐하면 svg가 전체적으로 재조정되고 텍스트가 동일한 패턴을 따르지 않기 때문입니다. 즉, SVG와 함께 다시 조정 이후 http://fiddle.jshell.net/78eh5u52/9/show/

는하지만은 "연락처"버튼이 표시되는 방식을 선호하지만, 당신이 바이올린에 볼 수있는 부드러운 스크롤 효과가 그

적용되지 않습니다 이 문제를 해결할 수있는 두 가지 방법이 있어야합니다 : svg 안에 텍스트를 배치하는 되돌릴 중 하나를 스크롤 효과를 얻는 방법을 찾으십시오. 또는 텍스트 크기 및 위치 배율을 기본 svg (svg 상단의 svg)와 정확히 동일하게 만듭니다.

이 문제를 해결하기 위해 어떤 방법을 사용하면 좋을지 모르겠지만 무엇을 조사해야합니까?

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

Answer 1

당신은 당신의 연결 부드러운 스크롤을 만들기 위해 SVG를 고수 할 수

여기 내 전체 코드입니다. jquery smooth-scroll을 사용하는 대신 스크롤링을 수행하는 사용자 정의 함수를 작성할 수 있습니다. 그리고 당신은 당신의 svg에서 쉽게 전화 할 수 있습니다.

귀하의 JQuery와 기능은 다음과 같이 할 수있다.

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

을 그리고 당신은이 같은 SVG에서이 호출 할 수 있습니다 : 당신은 스크립트 태그를 HTML로 포함 할 수 있습니다

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

공지 사항 상단. 코드에서, 그래서 당신의 기능을 찾을 수 있습니다.

.link { 
    cursor: pointer; 
}