Question

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

更新：<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>

这不是一个直接的实施，但应引导你走正确的道路。

我如何使用<a> menu from SVG?

1 个答案: