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

时间：2017-10-09 23:56:02

标签： html css svg

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

enter image description here 

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

3 个答案:

答案 0 :(得分：0)

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

＆＃13;
＆＃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;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我建议用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。

答案 2 :(得分：0)

你的方式是正确的，而不是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>
相关问题
最新问题