Tuesday, December 2, 2008

svg transform matrix

Oh what fun you can have with svg!

I'm working on a little flash game and I wanted to design the boards in inkscape, save as svg, transform them to my xml format and load 'em up... but...

Have you seen a one of these yet?

<rect
id="rect3199"
width="31.406677"
height="189.16795"
x="712.43353"
y="-707.71057"
transform="matrix(0,1,-1,0,0,0)"
/>

According to the spec, the syntax is matrix(a,b,c,d,e,f) which get laid out in matrix form like this:

if you guessed that, my hat is off to you! To me it is just bizarre...

OK, so what... matrix math rules out the xsl, right? Wrong...

Assuming you can pull out the a,b,c,d,e,f from that kooky string... then you can do this to apply the transformation matrix:

<xsl:attribute name="x">
<xsl:value-of select="$x * $a + $y * $c + $e"/>
</xsl:attribute>
<xsl:attribute name="y">
<xsl:value-of select="$x * $b + $y * $d + $f"/>
</xsl:attribute>

You have to do the same thing for width and height, too...

Happily, I had some old point * matrix implementation to pull from... if you don't have one handy... see above...

:-D

If you read the spec, you will see a bunch of other stuff I didn't bother with cuz I don't need it. Sorry...

Uhhmmm.... and I only ever see the case transform="matrix(0,1,-1,0,0,0)" so I hardcode the values for a,b,c,d,e,f,g like so

<xsl:variable name="a" select="'0'"/>
<xsl:variable name="b" select="'1'"/>
<xsl:variable name="c" select="'-1'"/>
<xsl:variable name="d" select="'0'"/>
<xsl:variable name="e" select="'0'"/>
<xsl:variable name="f" select="'0'"/>

Yeah... I know...

In case it helps, here is the board.xsl as it stands right now...

btw: alias xencode="sed 's/</\&lt;/g;s/>/\&gt;/g;s/\"/\"/g'"

No comments:

Post a Comment