6

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?

AlanObject
  • 9,613
  • 19
  • 86
  • 142

1 Answers1

12

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.

GarethOwen
  • 6,075
  • 5
  • 39
  • 56
  • I did look at this because it was mentioned in another stackoverflow thread. It doesn't seem to work in Firefox 4. I wish it did it would make life easier. The vector-effect seems to be a feature of the TinySVG specification and not the regular SVG 1.1 specification that the browsers implement. I can understand why they would add that since scaling drawings is a big issue on a mobile device with limited resolution. Ironic though that TinySVG would end up with features the regular SVG doesn't have. – AlanObject May 31 '11 at 15:45
  • Gareth I suspect you are right. I was hoping to get the SVG implementation to do the transform for me but I guess it was too good to be true. I will flag your answer as the accepted one because that is what I am going to do, but it would still be good for a solution to the original question be answered. – AlanObject Jun 02 '11 at 21:09
  • non-scaling stroke support should appear in Firefox 15 all being well, it just landed in the nightly builds – Robert Longson May 19 '12 at 14:05