45277 2010-09-06 15:41:03 -0700 Canvas api: c.createPattern(img,...) does not work if image is SVG 2024-05-22 09:32:45 -0700 1 1 1 Unclassified WebKit DOM 528+ (Nightly build) PC OS X 10.5 UNCONFIRMED https://jsfiddle.net/Lp1uvqoe/ P2 Normal --- 0 thaddee.tyl webkit-unassigned ahmad.saleem792 james karlcow knuts763 oldest_to_newest 274794 0 66671 thaddee.tyl 2010-09-06 15:41:03 -0700 Created attachment 66671 Canvas with an SVG image drawn as a pattern Reproducibility: always. Steps: 1. Go to a page that invokes c.createPattern(img, "repeat"); with an SVG image and draws the pattern onto a canvas. 2. Consider the fact that it does not appear. Notes: * c.fill() do not work. * c.stroke() do not work. * It is not an image loading issue. * It is not linked to the "repeat" part -- "no-repeat", "repeat-x", "repeat-y", "", and null, all yield the same result. 1087351 1 james 2015-04-22 04:56:30 -0700 I have also independently encountered this bug, with comparable results. var img = new Image(); img.onload = function() { var pattern = badge.createPattern(img, 'repeat'); badge.fillStyle = pattern; // draw 'badge' shape badge.fill(); }; img.src = '../flags/iso/'+country+'.svg'; This works as expected in Firefox and Chrome, but in Safari (7.0.3) the background is blank (white). Using a png or jpg for the pattern works as expected in Safari et al - it's only SVGs that render incorrectly. DrawImage also works in Safari for SVGs - it's only createPattern that fails. 1753590 2 knuts763 2021-04-23 08:18:01 -0700 Looks like this is still broken 2037036 3 ahmad.saleem792 2024-05-22 09:32:45 -0700 Changed above and only changed from SRC to newer placeholder SVG - https://jsfiddle.net/Lp1uvqoe/ All browsers (Safari 17.5, Chrome Canary 127 and Firefox Nightly 128) looks same here. @Karl - any input? 66671 2010-09-06 15:41:03 -0700 2010-09-06 15:41:03 -0700 Canvas with an SVG image drawn as a pattern bugCan.html text/html 546 thaddee.tyl PCFET0NUWVBFIGh0bWw+Cjx0aXRsZT5Vbml2ZXJzYWwgY2FudmFzIGJ1ZzwvdGl0bGU+CjxjYW52 YXM+PC9jYW52YXM+CjxzY3JpcHQ+CnZhciBjYW4gPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFn TmFtZSgnY2FudmFzJylbMF07CnZhciBjID0gY2FuLmdldENvbnRleHQoJzJkJyk7CnZhciBpbWcg PSBuZXcgSW1hZ2UoKTsKaW1nLnNyYyA9ICdodHRwOi8vY3JvY3ppbGxhLmNvbS9iaXRzX2FuZF9w aWVjZXMvc3ZnL3NhbXBsZXMvbGlvbi9saW9uLnN2Zyc7Ci8vaW1nLnNyYyA9ICd0aXJzLnBuZyc7 CmltZy5vbmxvYWQgPSBmdW5jdGlvbigpIHsKIHZhciBwYXQgPSBjLmNyZWF0ZVBhdHRlcm4oaW1n LCJyZXBlYXQiKTsKIGMuZmlsbFN0eWxlID0gcGF0OwogYy5maWxsUmVjdCgwLDAsYy5jYW52YXMu d2lkdGgsYy5jYW52YXMuaGVpZ2h0KTsKfQo8L3NjcmlwdD4KPHA+V2hhdCBzaG91bGQgYXBwZWFy IGFib3ZlIGlzOjxicj4KPGltZyBzcmM9Imh0dHA6Ly9jcm9jemlsbGEuY29tL2JpdHNfYW5kX3Bp ZWNlcy9zdmcvc2FtcGxlcy9saW9uL2xpb24uc3ZnIj4K