0

the following svg renders only in chrome/chromium. In doesn't draw in other browsers. eg. firefox, safari. i've created the jsfiddle

link to jsfiddle of the problem

<!DOCTYPE html>
    <html>
        <head>
            <title>color test</title>
            <style type="text/css">
                canvas {
                    border: 1px solid black;
                }
            </style>
        </head>
        <body>
            <canvas id="c"  width="400" height="400"></canvas>

            <script type="text/javascript">
                var canvas = document.getElementById('c');
                var ctx = canvas.getContext('2d');

                var data = svg_data;   // please see in the jsfiddle

    var DOMURL = window.URL || window.webkitURL || window;

    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml'});
    var url = DOMURL.createObjectURL(svg);
    console.log(url);
    window.open(url);
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }

    img.src = url;
</script>

Tomonso Ejang
  • 1,336
  • 3
  • 15
  • 27
  • 1
    For FF you must set absolute `width` and `height` attributes on your root `` element, in order to draw it on the canvas later on. https://jsfiddle.net/2s2j47k9/3/ There are dupes that I don't have time to find now... – Kaiido Jan 20 '18 at 11:05
  • @Kaiido thank you. please let me know if you get the time to find out the reason behind this behaviour – Tomonso Ejang Jan 20 '18 at 11:14
  • 1
    I know the reason, and it's quite simple: default value for these attributes is `100%`, which is a relative value. But in the context of a canvas context, specs don't say what it should be relative to (canvas size? drawImage params? something else? what when the context is transformed? And a lot of other unknown) Hence FF (and others IIRC) just ignore such svgs. Only Blink (and webkit?) do have some magic algorithm that will try to make it relative to nobody knows what. – Kaiido Jan 20 '18 at 11:21

0 Answers0