Vous essayez d'obtenir ce SVG pour couvrir le bouton?

Question

J'ai fait ce SVG, maintenant j'essaie de le faire pour couvrir le bouton, comment je fais ça?

Comme vous pouvez le voir dans le code, il est suspendu au bouton, comment l'ai-je recouvrir le bouton?

code:

https://jsfiddle.net/ztmvxnft/2/

SVG:

<svg width="266" height="266" viewBox="0 0 266 266"> 
    <line x1="264" y1="1" x2="0" y2="1" style="stroke: #0059dd; stroke-width: 3;" /> 
    <line x1="265" y1="265" x2="265" y2="0" style="stroke: #0059dd;stroke-width: 3; " /> 
    <line x1="100%" y1="265" x2="0" y2="265" style="stroke: #0059dd ; stroke-width: 3;" /> 
    <line x1="1" y1="100%" x2="1" y2="0" style="stroke:#0059dd;stroke-width: 3; " /> 
    <line x1="0" y1="0" x2="100%" y2="100%" style="stroke:#0059dd; stroke-width:3" /> 
    <line x1="0" y1="100%" x2="100%" y2="0" style="stroke:#0059dd; stroke-width:3" /> 
</svg> 

Answer 1

Le stylesheet-agent utilisateur a probablement (et dans le cas de Chrome a sans aucun doute) rembourrage à l'intérieur des boutons. Si vous ajoutez padding:0 à votre style du bouton, le SVG s'adapte correctement.

Modifier: Avec ce changement, vous pouvez toujours voir que le SVG ne correspond pas tout à fait, selon le navigateur. Si oui, c'est parce que la taille "266px" du bouton inclut la bordure du bouton. Si vous voulez que le SVG s'insère entièrement dans le bouton, vous pouvez changer le box-sizing en content-box comme dans le JSfiddle ci-dessous, mais gardez à l'esprit que cela signifie que votre bouton sera un peu plus grand que 266px. Alternativement, vous pouvez définir le border-width à 0 (ou le border à none) pour éliminer la bordure entièrement à quel point le bouton sera exactement 266px.

JSfiddle