Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • SVG Matrix transformation

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 299
    Comment on it

    The SVG stands for "scalable vector Graphic" and below are the example for SVG matrix.

    The matrix looks like this:

    a  c  e
    b  d  f
    0  0  1
    

    There is only first 6 values can be specified, you only provide 6 values to the matrix transformation function. Here is an example:

    transform="matrix(a,b,c,d,e,f)"
    

    The other transformation functions can be expressed as matrices. Here are some examples:

    Translate

    1  0  tx
    0  1  ty
    0  0   1
    
    matrix(1,0,0,1,tx,ty)
    

    Rotate

    cos(a)   -sin(a)  0
    sin(a)    cos(a)  0
         0        0   1
    
    matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
    

    Note: the values for cos(a) and sin(a) have to be precomputed before being inserted into the matrix. The parameter a is the angle to rotate.

    Scale

    sx  0  0
     0 sy  0
     0  0  1
    
    matrix(sx,0,0,sy,0,0)
    

    A skew transformation along the x-axis can be written as: Skew

    1  tan(a)  0
    0       1  0
    0       0  1
    
    matrix(1,0,tan(a),1,0,0)
    

    The tan(a) value has to be precomputed before being inserted into the matrix() function.

    A skew transformation along the y-axis can be written as:

    Skew

    1       0  0
    tan(a)  1  0
    0       0  1
    
    matrix(1,tan(a),0,1,0,0)
    

    Here is the output:

    <svg  xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="20" y="20" width="50" height="50"
          style="fill: #cc3333"/>
    
    <rect x="20" y="20" width="50" height="50"
          style="fill: #3333cc"
          transform="matrix(1,0,0,1,100,20)"
            />    
    </svg>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: