Question

I have one or more path elements inside a g element that I am scaling to fit inside a grid rectangle. The transform is applied to the g element. My transform works in that all the points end up at the right places, but I discovered that I have to adjust the stroke-width of the path to get a readable line.

The problem is that if the scale involves a large shift in the aspect ratio, I end up with some segments of the path being heavier weight than others, depending on their orientation.

Here is a typical transform that my code computed:

 scale(0.1875, -0.010397820616798718) translate(-1149000, -96174)

In this case I end up changing the stroke-width from 9px to about 48px. Segments close to the horizontal end up thin, those close to the vertical are thick.

Is there any easy way to end with all the segments with the same rendered width?

Answer 1

Have you looked at setting the vector-effect attribute to non-scaling-stroke?

 <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5" 
        x1="32" y1="50" x2="32" y2="350"/>

http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

UPDATE

The best solution I can think of is to manually transform the coordinates of your path.

• vector-effect="non-scaling-vector" is not consistently supported. My versions of Firefox and Safari do not support it, but my Chrome browser does.
• In the SVG standard there is no way of specifying a transformation for the stroke independantly. (A stroke-transform attribute would be nice – like the windows GDI+ drawing system, where a Pen object has it’s own local transformation).

Until this changes, the best solution I can think of is to manually work out the coordinates of your path – that is the svg has no transform elements; the coordinates are already transformed.