SVG + matrix3d ​​renders differently in different browsers

I am transforming an object using 3d matrix and svg. But the same matrix differs in different ways in different browsers. Here's an example:

http://jsfiddle.net/dexus/kcwrjgew/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" id='svg'>
    <rect style='transform:matrix3d(0.325454, 0.0220348, 0, -0.000124338, -0.276499, 0.0647953, 0, -0.000268559, 0, 0, 1, 0, 333, 195, 0, 1)' x='0' y='0' width='100' height='100' fill='yellow' stroke='navy' stroke-width='10' />
</svg>

      

As you can see, it outputs different images. Can anyone tell me why, and how to do this. Firefox does it right, by the way.

+2


source to share





All Articles