• ## problem with matrix transformation

(2)
• NextPrevious
• Hi, I try to understand the matrix operations in SVG. So I try to code an example. I want to test the inverse so that I can get from window to user
Message 1 of 2 , Aug 1, 2003
View Source
• 0 Attachment
Hi,

I try to understand the matrix operations in SVG. So I try to code an
example. I want to test the inverse so that I can get from window to

point 50
20
1

matrix 1.2 0 50
0 1.2 40
0 0 1

resulting new point after transformation

new Point 110
64
1

Ok so far so good, the resulting is my new point in window. Now I
want to calculate back to the point 50,20,1 just for testing if
everything is okay (I assume that I have the new point and I want to
get back to the original, for that I have to calculate with the new
point at 110,64 and multiply it with the inverse of the transform
matrix)

ax = b (b= 110,64 / a= matrixtransform)

I get the x with (I know it already it´s 50,20 just for testing)

x=inverse(a) * b

so I created the following script that should alert 50 20 but it
doesn´t. Am I doing wrong ?

Thanks

Marcel

my code

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"

<script type="text/javascript"><![CDATA[

function showThis(evt)
{
var svgdoc = evt.target.ownerDocument.documentElement;

var windowPoint = svgdoc.createSVGPoint();
windowPoint.a = 110;
windowPoint.b = 64;
alert(windowPoint.a + " " + windowPoint.b)

var matrix = svgdoc.createSVGMatrix();
matrix.a = 1.2;
matrix.b = 0;
matrix.c = 0;
matrix.d = 1.2;
matrix.e = 50;
matrix.f = 40;

var inverse = matrix.inverse();

var viewBoxPoint = windowPoint.matrixTransform(inverse);

alert(viewBoxPoint.x + " " + viewBoxPoint.y);
}

]]>
</script>
</svg>
• hi, i found the mistake I wrote windowPoint.a = 110; windowPoint.b = 64; BUT it should be windowPoint.x = 110; windowPoint.y = 64; and now he alerts
Message 2 of 2 , Aug 1, 2003
View Source
• 0 Attachment
hi,

i found the mistake

I wrote

windowPoint.a = 110;
windowPoint.b = 64;

BUT it should be

windowPoint.x = 110;
windowPoint.y = 64;

thanks

Marcel

--- In svg-developers@yahoogroups.com, "Marcel" <Marcel.Sauer@g...>
wrote:
> Hi,
>
> I try to understand the matrix operations in SVG. So I try to code
an
> example. I want to test the inverse so that I can get from window
to
>
> point 50
> 20
> 1
>
> matrix 1.2 0 50
> 0 1.2 40
> 0 0 1
>
> resulting new point after transformation
>
> new Point 110
> 64
> 1
>
> Ok so far so good, the resulting is my new point in window. Now I
> want to calculate back to the point 50,20,1 just for testing if
> everything is okay (I assume that I have the new point and I want
to
> get back to the original, for that I have to calculate with the new
> point at 110,64 and multiply it with the inverse of the transform
> matrix)
>
> ax = b (b= 110,64 / a= matrixtransform)
>
> I get the x with (I know it already it´s 50,20 just for testing)
>
> x=inverse(a) * b
>
> so I created the following script that should alert 50 20 but it
> doesn´t. Am I doing wrong ?
>
> Thanks
>
> Marcel
>
> my code
>
>
> <?xml version="1.0" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
> <svg xmlns="http://www.w3.org/2000/svg"
>
> <script type="text/javascript"><![CDATA[
>
> function showThis(evt)
> {
> var svgdoc = evt.target.ownerDocument.documentElement;
>
> var windowPoint = svgdoc.createSVGPoint();
> windowPoint.a = 110;
> windowPoint.b = 64;
> alert(windowPoint.a + " " + windowPoint.b)
>
> var matrix = svgdoc.createSVGMatrix();
> matrix.a = 1.2;
> matrix.b = 0;
> matrix.c = 0;
> matrix.d = 1.2;
> matrix.e = 50;
> matrix.f = 40;
>
> var inverse = matrix.inverse();
>
> var viewBoxPoint = windowPoint.matrixTransform(inverse);
>
> alert(viewBoxPoint.x + " " + viewBoxPoint.y);
> }
>
> ]]>
> </script>
> </svg>
Your message has been successfully submitted and would be delivered to recipients shortly.