SVG "stroke-dasharray" interacts surprisingly with non-uniform SVG scaling transformation

[Richard Mlynarik]

A non-uniform SVG scale transformation -- eg "scale(1,-30)" --

results in dash pattern being scaled by a factor of 30, eg

  <g transform="scale(1,-30)">
    <g style="stroke-dasharray: 5 3 1 3;">
      <path d="..."/>
    </g>
</g>

will render a path with very large dashes, in effect scaling the path's dash-array by a factor of 30, not by 1.

 

It is entirely unclear what the "correct" behaviour is, but other programs (including the SVG renders in browsers I've tried Firefox and Safari)

instead appear to scale the dashes by the minimum of the differing X and Y scales, or "1" in this case.

 

I suggest this may be the less-bad decision, for compatibility/consistency reasons.

 

SVG is simply a nightmare of misdesign and confusion, isn't it?

 

svg-transform-test-case-2.svg

[Sean P]

Hi Richard,

Unfortunately what the SVG is doing isn't something that is supported or possible within Designer. In Designer when the contents of the groups are transformed, the stroke weight is only ever scaled upwards if that object's stroke has 'Scale with object' enabled. However what this does is just increase the Stroke weight to ensure the stroke still maintains the correct ration when the object has been scaled. The dash pattern is then applied to that stroke weight, so its never possible to give it a non uniform scaling that looks to be what is happening with your SVG.

[Richard Mlynarik]

Hi, I wasn't suggesting that Designer support non-equal scaling of strokes.  I don't even want that myself!

 

What I am suggesting is that the fall-back *choice* Designer makes in how to interpret this unsupported scaling isn't the same as other programs (Firefox, Safari=Webkit, Illustrator CS4 (the only version I can still run sometimes) do, which is to choose to scale the stroke dash pattern by the *minimum* of transformation's scale-x, scale-y instead of the maximium.

 

So in a "transform=scale(30,1)" choose not to scale the stroke pattern (and stroke width, etc) at all, instead of scaling by a factor of 30.

 

Yes, this is an arbitrary choice, but it's one Designer seems to make differently from some other SVG-consuming programs, and I can argue that the opposite way of doing things is slightly superior.   (It would certainly simplify my life to not have to patch this stuff up by hand.)