SVG “non-scaling-stroke” attribute support



Product

Sometimes it’s preferable to have the lines of an object keep their original width, regardless of the applied transformation. For example, you draw a line on a map showing a user’s position and a destination. When the user zooms in on the map, you want to enlarge the map but have the line maintain its width.

In the SVG standard, the “non-scaling-stroke” attribute indicates that the stroke width does not depend on the zoom or scaling. In other words, an object’s lines aren’t affected by transformations and zooming.

Here’s an example of two rectangles with the same line thickness. The rectangle on the left uses the “non-scaling-stroke” attribute, whereas the rectangle on the right does not use this attribute:

Take a look at the SVG file:

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

We’ve also added new commands to the “4D SVG” theme. You can define the “non-scaling-stroke” attribute to drawing objects with the SVG_SET_STROKE_VECTOR_EFFECT method.

// 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;"blue";"white";1)
SVG_SET_STROKE_VECTOR_EFFECT ($rect1;"non-scaling-stroke")

// Second rectangle
$rect2:=SVG_New_rect ($svgRef;45;1;40;40;0;0;"green";"white";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)

Discuss

Tags , ,

Vanessa Talbot
• Product Owner •Vanessa Talbot joined 4D Program team in June, 2014. As a Product Owner, she is in charge of writing the user stories then translating it to functional specifications. Her role is also to make sure that the feature implementation delivered is meeting the customer need.Since her arrival, she has worked to define key features in 4D. She has worked on most of preemptive multi-threading new features and also on a very complex subject: the new architecture for engined application. Vanessa has a degree from Telecom Saint-Etienne. She began her career at the Criminal Research Institute as a developer for the audiovisual department. She has also worked in media and medical fields as expert in technical support, production as well as documenting new features.