Comment faire pour supprimer l'écart supérieur du texte svg

Donc, il ya un écart au-dessus de mon svg que peu importe la hauteur, il persiste. J'ai pensé à des solutions pour résoudre ce problème, par exemple en définissant y = "22" puis en définissant une marge supérieure: 10px ;. Mais, je veux juste savoir ce qui ne va pas exactement et quelle est la bonne façon de résoudre ce problème.Comment faire pour supprimer l'écart supérieur du texte svg

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

Source

2017-10-09 Chris.Le

Vous avez juste besoin de changer la valeur y-20 au lieu de 50

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

Source

2017-10-10 00:00:34

Ouais, c'est ce que je comptais faire à la fin comme indiqué dans le poste. Mais la chose est que je veux qu'il y ait un écart mais sans que l'écart soit cliquable. –

Je suggère de changer y = "20" par dy = "25" plus d'information voir: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy

Wh y 25? parce que c'est la taille de police que vous choisissez.

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

ajouter aussi la propriété preserveAspectRatio qui pourrait être utile pour vous aussi.

Source

2017-10-10 01:15:33

[preserveAspectRatio est ignoré sans viewBox] (https://www.w3.org/TR/SVG2/coords.html#PreserveAspectRatioAttribute) –

votre droit @RobertLongson mais j'ai ajouté cela afin qu'il puisse y jeter un coup d'oeil parce que cela peut être utile;) –

votre chemin est correcte au lieu de 50 pour le Y, vous pouvez mettre 20 pour le Y, alors il sera fixé

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

Source

2017-10-10 03:02:22 Arsham

Comment faire pour supprimer l'écart supérieur du texte svg

Répondre

Questions connexes