Canvas drawImage inline svg doesn't work on Firefox [duplicate]

Question

Here is a fiddle of an example that takes an svg and turns it into a canvas: http://jsfiddle.net/Na6X5/944/

var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); var svg = document.getElementById('mySVG'); var img = new Image(); img.onload = function() { console.log(img.width, img.height) document.getElementById('canvas1').width = 300 document.getElementById('canvas1').height = 200 ctx.drawImage(img, 0, 0, 300, 200); } img.src = "data:image/svg+xml," + encodeURIComponent(svg.outerHTML)

This works fine on Chrome(51.0). But produces an empty canvas on Firefox(47.0.1) with no errors.

This example works on Firefox http://codepen.io/keithwyland/pen/umova but changing the src of the image to an inline svg produces the problem listed above http://codepen.io/Ewhite613/pen/YWZoGy

Robert Longson · Accepted Answer · 2025-07-19 21:35:50Z

8

It used to be the case that SVG image data had to have width and height attributes that are were not percentages but this was fixed some time ago.

edited Jul 19 at 21:35

answered Jun 29, 2016 at 18:26

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jjz Over a year ago

The canvas html element must also be styled as display:block

Collectives™ on Stack Overflow

Canvas drawImage inline svg doesn't work on Firefox [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related