J'ai développé une TOILE zone dans laquelle quelques éléments HTML sont rendu en tant que données SVG. Il fonctionnait parfaitement avant firefox nouvelle version mise à jour. Maintenant, après cette mise à jour récente, seules les images de fond CSS sont rendues. Les images en ligne via la balise img ne montrent rien.Après la mise à jour Firefox 55 images en ligne (img) n'est pas rendu en HTML TOILE par SVG
Je ne peux pas utiliser les images d'arrière-plan css, car certaines limitations sont possibles. Je dois montrer les couleurs en arrière-plan et certaines images PNG sur la couche supérieure grâce à l'indice z et à la position: propriétés absolues. Ainsi, il se sentira comme un dessin de couleur dans une zone transparente.
Mise à jour - Exemple de code -
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;background-color:#0f0'>" +
"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
"<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='150' height='150'/></div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0, 200,200);
DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
S'il vous plaît pro vide an [MCVE] – Kaiido
Je pense que [j'en ai un] (https://jsfiddle.net/7qzrv71r/), très étrange en effet ... 'SVGImage' va rendre, mais'![]()
'dans' ' ne le sera pas quand le doc svg est lui-même rendu dans un élément HTMLImage, mais le sera dans un iframe ... Une réponse est [* file a bug *] (https://bugzilla.mozilla.org/enter_bug.cgi#h = product% 7C) (Il n'a en fait rien à voir avec canvas) –
Kaiido
Je viens de remplir un rapport de bug https://bugzilla.mozilla.org/show_bug.cgi?id=1409992 Voyons voir ce qui va se passer. – Kaiido