Search code examples
matrixsvgheightwidthmultiplication

SVG transform=Matrix(a,b,c,d,e,f) on width and height


(this should probably be in another community but I couldn't find how to move the question) I was told for an SVG I have that one of the transformations in it is an illegal or invalid transformation. I believe I have found the offending transformation and am trying to understand what it did.

The transformation is: <image transform="matrix(0.773723,0,0,0,860,182)" width="137" height="2" xlink:href="someImage.png" />

From my understanding, the SVG notation of the matrix (0.773723,0,0,0,860,182) is the equivalent of (pretend its one big bracket not 3 on each side):

[.773723,0,0860]
[0,0,182       ]
[0,0,1         ]

My research has lead me to believe I am to use the width and height after the matrix, convert it into matrix notation and multiply the two to understand how it was transformed. If that is correct, I'm trying to understand how to convert the height and width to the matrix notation []. If it is not correct, any pointers in the right direction would be greatly appreciated!


Solution

  • That looks like a legal transform (technically). but it's incorporating a 0% vertical scale: that "0" in the fourth position of the matrix, so it's making your element disappear. Height and width are the "before" height and width, not the "after" height and width. You can't specify absolute dimensions in a matrix, just scaling factor. (You can specify offset or translate in absolute dimensions).