Rendering of non-uniform scaled diagonal lines

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Rendering of non-uniform scaled diagonal lines

Regina Henschel
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 (1K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Rendering of non-uniform scaled diagonal lines

Jarek Foksa
I can’t find the relevant section in the spec, but I would expect the stroke to be painted first, before applying group transforms, thus making the stroke look like a parallelogram.

The spec defines <line> and <polyline> as "mathematically equivalent to a <path>”. I don't see any reason why they should be rendered differently than <path>.

Chrome and the dev version of Inkscape seem to render this graphics correctly, I’m not sure about other apps.

> On 2016-03-06, at 17:48, Regina Henschel <[hidden email]> wrote:
>
> 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>


Reply | Threaded
Open this post in threaded view
|

Re: Rendering of non-uniform scaled diagonal lines

Paul Hopgood
In reply to this post by Regina Henschel
Unless the line has  vector-effect="non-scaling-stroke" then it should scale
as per the x and y scaling.

-----Original Message-----
From: Regina Henschel
Sent: Sunday, March 06, 2016 4:48 PM
To: www-svg
Subject: Rendering of non-uniform scaled diagonal lines

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>







Reply | Threaded
Open this post in threaded view
|

Re: Rendering of non-uniform scaled diagonal lines

Tab Atkins Jr.
In reply to this post by Jarek Foksa
On Sun, Mar 6, 2016 at 10:32 AM, Jarek Foksa <[hidden email]> wrote:
> I can’t find the relevant section in the spec, but I would expect the stroke to be painted first, before applying group transforms, thus making the stroke look like a parallelogram.
>
> The spec defines <line> and <polyline> as "mathematically equivalent to a <path>”. I don't see any reason why they should be rendered differently than <path>.
>
> Chrome and the dev version of Inkscape seem to render this graphics correctly, I’m not sure about other apps.

Yup, the Chrome rendering (parallelograms when scaled non-uniformly)
is correct.  Like filters, transforms are a post-painting operation
(thus the stretching), and all shapes in SVG are just shorthands for
some <path> (thus all the elements acting the same).

~TJ

Reply | Threaded
Open this post in threaded view
|

deformations pre and post RE: Rendering of non-uniform scaled diagonal lines

David Dailey
\

Tab
On Monday, March 07, 2016 1:30 AM
writing To: Jarek Foksa
and Cc-ing: Regina Henschel; and www-svg
concerning: Re: Rendering of non-uniform scaled diagonal lines

said something of the following sort..................

On Sun, Mar 6, 2016 at 10:32 AM, Jarek Foksa <[hidden email]> wrote:
> I can’t find the relevant section in the spec, but I would expect the stroke to be painted first, before applying group transforms, thus making the stroke look like a parallelogram.
>
> The spec defines <line> and <polyline> as "mathematically equivalent to a <path>”. I don't see any reason why they should be rendered differently than <path>.
>
> Chrome and the dev version of Inkscape seem to render this graphics correctly, I’m not sure about other apps.

Yup, the Chrome rendering (parallelograms when scaled non-uniformly) is correct.  Like filters, transforms are a post-painting operation (thus the stretching), and all shapes in SVG are just shorthands for some <path> (thus all the elements acting the same).

-------------

I've been thinking about these sorts of things recently and do wish that there were pre-rendered ways of dealing with feDisplacement. Specifically, if one applies a vector-based (let's say feTurbulence, either Perlin noise -- or something better -- which gives smooth chroma into an xy realm (like a polygon or a rect)), SVG filters would be more useful if the content being deformed were deformed as vectors rather than polygons. By this, I mean, if we applied the deformation to the coordinates that define a path rather than to the pixels of the path after rendering, it's a lot more consistent, semantically, with what an author intends.

Here's an example of what I mean: http://cs.sru.edu/~svg/Chapter05/G05xx48.svg
Regards
David




Reply | Threaded
Open this post in threaded view
|

Re: Rendering of non-uniform scaled diagonal lines

Regina Henschel
In reply to this post by Regina Henschel
Hi all,

thank you for your answers. The desired rendering is clear now.

The problem might be a candidate for an example in the TestSuite.

Kind regards
Regina

Regina Henschel schrieb:

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