SVG

Question

통해 HTML 캔버스 렌더링되지 파이어 55 인라인 영상 (IMG)을 업데이트 한 후에 I 몇 HTML 요소 SVG 데이터으로 렌더링되어있는 CANVAS 영역을 개발 하였다. 파이어 폭 새롭게 업데이트 된 버전 전에는 완벽하게 작동했습니다. 이제이 최근 업데이트 후에 CSS 배경 이미지 만 렌더링됩니다. img 태그를 통한 인라인 이미지는 아무것도 보이지 않습니다.

일부 제한 사항 때문에 CSS 배경 이미지를 사용할 수 없습니다. 높은 Z- 인덱스와 위치를 통해 상위 레이어의 배경 및 일부 PNG 이미지에 색상을 표시해야합니다. 절대 속성. 그래서, 그것은 투명한 영역에서 컬러 드로잉과 같은 느낌이들 것입니다.

업데이트 - 샘플 코드 -

<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> 

Answer 1

이> = 그것은 지금 현재 박에 고정되어 55 < 58
https://bugzilla.mozilla.org/show_bug.cgi?id=1409992

(58)를 구축 파이어 폭스 버전에서 버그가 수 있도록이 확인된다.

불행히도 알려진 해결책이 없습니다.