Bordure constante dans un graphique SVG dynamique

Question

Je veux avoir un rectangle qui prend toute la place dans un fichier SVG. Il devrait également avoir une bordure (largeur de trait 3px). La taille du graphique devrait être facilement modifiable (en changeant les attributs "largeur" ​​et "hauteur" du nœud "svg"). Je suis venu avec la construction suivante:

<svg width="150" height="35" > 
    <g> 
    <rect 
     id="rect6648" 
     style="fill:#ffffff; fill-opacity:1; stroke:#000000; stroke-width:3;" 
     x="0" 
     y="0" 
     width="100%" 
     height="100%" /> 
    </g> 
</svg> 

Mais il produit image avec bordure sale:

je besoin de quelque chose comme ceci:

Est-il possible du tout? Comme mentionné précédemment, il doit fonctionner pour n'importe quelle taille du graphique.

Merci d'avance!

Answer 1

Hélas, non, du moins pas avec SVG purement déclaratif. Le trait d'une forme est peint sur les deux côtés de la ligne géométrique qui définit cette forme (dans votre cas, il y a 1,5 de chaque côté). À cause de cela, il sera coupé pour une forme qui remplit toute la vue.

Dans quel contexte utilisez-vous ceci? Vous devriez être capable de le scripter: obtenir la taille du viewbow, sur rect x et y sur stroke-width/2, width sur width - stroke-width et height to height - stroke-width. Si vous êtes dans un contexte dynamique, vous devrez détecter les redimensionnements, mais c'est souvent possible.

Answer 2

Vous devez placer le rectangle à des coordonnées de demi-pixel comme x="0.5" y="0.5", puis les bordures ne seront pas floues. Ajoutez également vector-effect:non-scaling-stroke au CSS du rectangle pour être sûr que la bordure est toujours de 3px, quel que soit le niveau de zoom.