W3C home > Mailing lists > Public > www-svg@w3.org > March 2016

Rendering of non-uniform scaled diagonal lines

From: Regina Henschel <rb.henschel@t-online.de>
Date: Sun, 6 Mar 2016 17:48:32 +0100
To: www-svg <www-svg@w3.org>
Message-ID: <56DC5F60.1080807@t-online.de>
Hi all,

I have problems to determine, how a line is to be rendered, if it is 
scaled different in x and y direction.

Please look at the attached file (or use the source at the end of the 
mail in case the list does not allow attachments).
It contains a group with
kind "line" in Green
kind "polyline" in Blue
kind "path" in Red
rectangle in Silver
The stroke-width is so large, that the lines look like rectangles.
I have repeated the elements, so that no other effects influence the 
rendering, but only the scaling.

This group is stretched in x-direction by transform="scale(3,1)" and it 
is stretched in y-direction by transform="scale(1,3)". How should the 
result be rendered? I see in:

Chrome (49.0.2623.75 m), Seamokey (2.39), The Gimp (2.8.4), Apache 
OpenOffice (4.1):
All types, "line", "polyline" and "path" become parallelograms.

Batik (1.7):
Types "polyline" and "path" are stretched to parallelograms, but the 
type "line" stay rectangular.

Inkscape (0.48):
All types, "line", "polyline" and "path" stay rectangular. In the 
original group they are inside the silver rectangle, in the transformed 
group they exceed the silver rectangle.

Corel Draw 12 (I know its old, from 2003), LibreOffice (5.2):
The lines stay rectangular, the width is wrong.

LibreOffice is the reason, why I ask for the correct rendering.

Kind regards
Regina

<svg id="svg-root" width="200mm" height="200mm"
   viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>The file tests non-uniform scale on different kind of lines.</desc>
   <title id="test-title">Scale on different kind of lines</title>

   <rect id="test-frame" x="0" y="0" width="199" height="199" 
fill="none" stroke="#000" stroke-width="0.5"/>

   <g>
     <rect x="10" y="10" width="40" height="40" fill="silver"/>
     <line x1="25" y1="12" x2="48" y2="35" stroke-width="4" 
stroke="green" />
     <polyline points="12,12 48,48" stroke-width="4" stroke="blue"/>
     <path d="M12,25 L36,48" stroke-width="4" stroke="red" />
   </g>

<g transform="translate(25,0)">
   <g transform="scale(3,1)">
     <rect x="10" y="10" width="40" height="40" fill="silver"/>
     <line x1="25" y1="12" x2="48" y2="35" stroke-width="4" 
stroke="green" />
     <polyline points="12,12 48,48" stroke-width="4" stroke="blue"/>
     <path d="M12,25 L36,48" stroke-width="4" stroke="red" />
   </g>
</g>

<g transform="translate(0,25)">
   <g transform="scale(1,3)">
     <rect x="10" y="10" width="40" height="40" fill="silver"/>
     <line x1="25" y1="12" x2="48" y2="35" stroke-width="4" 
stroke="green" />
     <polyline points="12,12 48,48" stroke-width="4" stroke="blue"/>
     <path d="M12,25 L36,48" stroke-width="4" stroke="red" />
   </g>
</g>

</svg>








scale_diagonal_strokes_in_different_directions.svg
(image/svg+xml attachment: scale_diagonal_strokes_in_different_directions.svg)

Received on Sunday, 6 March 2016 16:49:03 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:47:43 UTC