3

I'm transfroming an object using a 3d matrix and svg. But the same matrix renders differently in different browser. Here is the 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 a different images. Can anyone tell me why, and how to get this fixed. Firefox renders it correctly by the way.

dexus
  • 53
  • 6
  • SVG is a different namespace than HTML, I dont think there is a defined spec for how CSS transforms are supposed to affect SVG elements. Which means every browser will do it differently. For example in Safari this rect isnt transformed at all. You will either need to apply the CSS transform to an html element that wraps the svg element, or figure out how to project your 3d matrix down to 2d matrix (3x3) and use it in an SVG `transform` attribute on the rect. – Owen Masback Nov 28 '14 at 08:57
  • 1
    @OwenMasback see http://www.w3.org/TR/css3-transforms/#svg-three-dimensional-functions (but note that the spec is a working draft still). – Erik Dahlström Nov 28 '14 at 09:52
  • This is driving me crazy! Is there at least a bug report or any sort of official information if and when this will land in WebKit? – neo post modern Jul 08 '15 at 13:23
  • I can confirm, I'm having the same issues. There seems to be a significant difference. – Gant Laborde Oct 05 '22 at 15:44

0 Answers0