Artyom Oleynichenko Artyom Oleynichenko - 3 months ago 12
HTML Question

How can I use <a> menu from SVG?

I need help!
I have SVG pictures and font.svg also. But how Can I create nav-menu with this font? If I paste just text with font-family "font.svg" then I have different size when I change scale(look pic 2). But I can't create my menu just from picture because I can't use link for this. I have no idea how to use it.
UPD:
I decided use open sourse and paste there "href" like this:

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


All code:

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


It works what I need BUT I have errors (Errors)

MENU

UPDATE: With
<a xlink:href="#">
it's working!

Answer

You really should not be typing/using fonts in an image base. You should add them to your font base by doing such code:

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

Once you do that you can make a simple list with the option you want on there as such:

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

This is not a direct implementation but should steer you in the right path.

Comments