Hi, i just work on some interesting project, where peaople can designe
they own sport field. And after they finish there is option to save
designe as image. I use SVG and script for saving SVG as PNG, but
there is problem in chrome and opera. In firefox and edge everything is
fine, image is saved as expected, but in chrome image is saved like
there is no perspective. Please look at images.
You can see images:
1.png is from program,
2.png is saved from firefox and
3.png is saved from Chrome.
Here is link where you can try app:
https://podne-obloge.com/bergo/index.phpCreate some sport field you want and try to save image in FF and Chrome to see what i am talking about.
Problematic part of code:
"<svg id="bergoCourt" width=1600 height=600 xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="
http://www.w3.org/1999/xlink" version="1.1" xmlns:ev="
http://www.w3.org/2001/xml-events"
style="overflow: visible; transform: matrix3d(1,-0.03,0.00,0,-0.03,0.5,0.87,-0.001,0,-0.87,0.5,0,-60,140,0,1); ">
<rect id="fieldBase" width="1300" height="370" x="0" y="0" style="stroke-width: 8; stroke: black; fill: rgb(0, 106, 179);"></rect>
</svg>"
Especialy this part: "style="overflow: visible; transform: matrix3d(1,-0.03,0.00,0,-0.03,0.5,0.87,-0.001,0,-0.87,0.5,0,-60,140,0,1); "", where FF save IMG 1:1, and Chrome like he can't see part with perspective.
Fun note: when you save image in Chrome and open in photoshop and just add perspective you will got exactly what is supposed.
Can you help me to solve this problem?