Il est parfois préférable que les lignes d’un objet conservent leur largeur d’origine, quelle que soit la transformation appliquée. Par exemple, vous dessinez une ligne sur une carte indiquant la position d’un utilisateur et une destination. Lorsque l’utilisateur effectue un zoom avant sur la carte, vous souhaitez agrandir la carte mais faire en sorte que la ligne conserve sa largeur.
Dans la norme SVG, l’attribut « non-scaling-stroke » indique que la largeur du trait ne dépend pas du zoom ou de la mise à l’échelle. En d’autres termes, les lignes d’un objet ne sont pas affectées par les transformations et le zoom.
Voici un exemple de deux rectangles ayant la même épaisseur de trait. Le rectangle de gauche utilise l’attribut « non-scaling-stroke », tandis que le rectangle de droite n’utilise pas cet attribut :
Jetez un coup d’œil au fichier SVG :
<svg viewBox="0 0 90 45" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="40" height="40" fill="white" stroke="blue" stroke-width="1px" vector-effect="non-scaling-stroke"/> <rect x="45" y="1" width="40" height="40" fill="white" stroke="green" stroke-width="1px" /> </svg>
Nous avons également ajouté de nouvelles commandes au thème « 4D SVG ». Vous pouvez définir l’attribut « non-scaling-stroke » aux objets de dessin avec la méthode SVG_SET_STROKE_VECTOR_EFFECT méthode.
// Create view box
$svgRef:=SVG_New (90;45)
// First rectangle with the non-scaling-stroke attribute
$rect1 :=SVG_New_rect ($svgRef;1;1;40;40;0;0 ; "bleu" ; "blanc";1)
SVG_SET_STROKE_VECTOR_EFFECT ($rect1; "non-scaling-stroke")
// Second rectangle
$rect2 :=SVG_New_rect ($svgRef;45;1;40;40;0;0 ; "vert" ; "blanc";1)
// Save image on disk
File ("/RESOURCES/Images/rectangle.svg").create()
SVG_SAVE_AS_TEXT ($svgRef; File("/RESOURCES/Images/rectangle.svg").platformPath)
// Clear reference
SVG_CLEAR ($svgRef)