Question

所以在我的svg之上有一个差距，无论高度如何仍然存在。我确实想到了解决这个问题的方法，例如设置y =＆＃34; 22＆＃34;然后设置margin-top：10px;。但是，我更希望找出确切的错误以及解决此问题的正确方法。

<!DOCTYPE html>

<html>

<head>

<style>
span.top { display:block;}
</style>

</head>

<body>

<span class="top">
<a href="https://www.google.com/" title="Home">
<svg width="70px" height="50px">
    <text x="0" y="50" font-family="arial" font-size="25">
        Home
    </text>
</svg>
</span> 

</body>
</html>

Answer 1

您只需将y值更改为20而不是50

＆＃13;

<span class="top">
<a href="https://www.google.com/" title="Home">
<svg width="70px" height="50px">
    <text x="0" y="20" font-family="arial" font-size="25">
        Home
    </text>
</svg>
</span>

＆＃13;

Answer 2

我建议用dy =“25”改变y =“20” 更多信息请参阅：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy

为什么25？因为它是您选择的字体大小。

<svg width="70px" height="50px" preserveAspectRatio="xMinYMin">
 <text x="0" dy="25" font-family="arial" font-size="25">
    Home
 </text>
</svg>

我还添加了对您有用的属性preserveAspectRatio。

Answer 3

你的方式是正确的，而不是50的Y，你可以为Y放20，然后它将被修复

<span class="top">
<a href="https://www.google.com/" title="Home">
<svg width="70px" height="50px">
    <text x="0" y="20" font-family="arial" font-size="25">
        Home
    </text>
</svg>
</span>

如何从svg文本中删除上部间隙

3 个答案: