<a> SVG의 메뉴는 어떻게 사용할 수 있습니까?

Question

도움이 필요합니다. SVG 그림과 font.svg도 있습니다. 하지만 어떻게이 글꼴로 nav-menu를 만들 수 있습니까? font-family "font.svg"라는 텍스트를 붙이면 스케일을 변경할 때 크기가 달라집니다 (그림 2 참조). 하지만이 링크를 사용할 수 없기 때문에 그림만으로 메뉴를 만들 수는 없습니다. 어떻게 사용하는지 모르겠습니다. UPD : 내가 사용 열려있는 sourse를 결정하고이 같은 "HREF"를 붙여 넣습니다

<text class="cls-4" transform="translate(433.73 27.26)"><a href="#">Category</a></text> 

모든 코드 :

<svg id="ap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1136 53"><defs><style>.cls-1{fill:#4d4d4d;}.cls-2{fill:#ccc;}.cls-3{fill:#333;}.cls-4{font-size:15px;font-family:Nirmala UI;}.cls-5{fill:#666;}</style></defs><title>menu_verx</title><g id="ap-2" data-name="ap"><polygon class="cls-1" points="799.27 46 200.01 46 170.01 0 816.72 0 799.27 46"/><polygon class="cls-2" points="510 15.2 510 9 0 10 0 37 510 37 510 30.8 515.8 23 510 15.2"/><polygon class="cls-3" points="0 0 0 11 0 12 217.9 12 243.12 53 380.44 53 409.17 0 0 0"/><text class="cls-4" transform="translate(433.73 27.26)"><a href="#">Category</a></text><polygon class="cls-1" points="949.03 23 1136 23 1136 0 934.03 0 949.03 23"/><polygon class="cls-5" points="511.72 23 507.87 27.98 508.86 28.94 513.7 23 508.86 17.06 507.87 18.03 511.72 23"/><path class="cls-2" d="M703,9"/><polygon class="cls-2" points="703 9 703 15.2 708.8 23 703 30.8 703 37 791 37 801.58 9 703 9"/><polygon class="cls-3" points="789.16 13.57 1136 13.57 1136 0 782.51 0 789.16 13.57"/></g></svg> 

그것은 내가 필요한 작동하지만 내가 오류 (Errors)

이

MENU

업데이트 : <a xlink:href="#">으로 업데이트 중!

Answer 1

이미지 기반에 실제로 글꼴을 입력하거나 사용하면 안됩니다.

: 당신은 당신은 거기에서 원하는 옵션을 간단한 목록을 만들 수 있습니다 그렇게되면

<style type="text/css"> 
 
@font-face { 
 
    font-family: "My Custom Font"; /*Find your font*/ 
 
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");/*Find your url*/ 
 
} 
 
p.customfont { 
 
    font-family: "My Custom Font", Verdana, Tahoma; 
 
} 
 
</style> 
 
<p class="customfont">Hello world!</p>

: 당신은 같은 코드를 수행하여 글꼴베이스에 추가한다

<ul> 
 
    <li><a href="default.asp">Appliances</a></li> 
 
    <li><a href="news.asp">Electronics</a></li> 
 
    <li><a href="contact.asp">Contact</a></li> 
 
    <li><a href="about.asp">About</a></li> 
 
</ul>

이 직접 구현하지만 말아야하지 않습니다 올바른 길로 인도하십시오.