Question

所以我正在学习如何使用SVG，这种情况一直在发生，我无法弄清楚原因。同样标题随之移动，如下所示。这两个元素之间的差距不断发生，我在网上搜索但无法弄清楚是什么问题。

示例图片：The Gap

这是我的代码，如果它有帮助：

<!DOCTYPE html>
<html lang="en-US">
<html>

<head>

<style>

@font-face {
    font-family: caviarplain;
    src: url(fonts/CaviarDreams.ttf);
}


span.topbar {
  display: inline;
    float:right;
    margin-right:10px;
  }



 </style>
  </head>

<body>



<span class="topbar">
<a href="About.html" title="About">
   <svg>
    <text x="0" y="50" font-family="caviarplain" font-size="25">
        About
    </text>
   </svg>
</a>
</span>

<span class="topbar">
<a href="Homepage.html" title="Homepage">
<svg>
    <text x="0" y="50" font-family="caviarplain" font-size="25">
       Home
    </text>
</svg>
</a>
</span> 

</body>
</html>

Answer 1

由于svg具有默认的宽度和高度，你应该像这样给出css的宽度

    svg{
        width:50px;
    }

为什么这两个元素之间存在差距？

1 个答案: