SVG consisting of 3 rectangles, one of it with a perspective around y-axis

Question

Im trying to create a logo consisting of 3 rectangles in different colors next to each other.
The middle one should become a perspective around the y-axis (to look like an open door).
To the right side of the logo I would like to place some text.
I already placed the 3 rectangles (without perspective) as inline SVG,
this works in codeplayground but wont show up in a broser here IE.
My goal is to get it showing up in codeplayground as well as in IE and Mozilla Firefox.
Any help (German / English) would be nice :-)

Answer 1

Update: I got it working on playground (without inline svg!). If your interested:

https://code.sololearn.com/W1valeGan0HA/#html

Next step would get it running on Internet Explorer.

If you have any kind of advive for changes in structure or on getting it work in an html doc for IE let me know :-)