0
未呈現,我已經開發出一種帆布區,其中幾個HTML元素渲染爲SVG數據。它在firefox新的更新版本之前工作完美。現在,在最近更新之後,只有CSS背景圖像正在渲染。通過img標籤嵌入圖像沒有任何顯示。更新火狐55內嵌圖像(IMG)後在HTML畫布通過SVG
我不能使用css背景圖片,因爲有一些限制。我必須通過更高的z-index和位置:絕對屬性來顯示背景中的顏色和上層的一些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>
請親提供一個[MCVE] – Kaiido
我認爲[我有一個](https://jsfiddle.net/7qzrv71r/),確實很奇怪......'SVGImage'會渲染,但''在'不會當svg文檔本身在HTMLImage元素中呈現時,但會在iframe中時...一個答案是[*文件錯誤*](https://bugzilla.mozilla.org/enter_bug.cgi#h =產品%7C)(它實際上與畫布無關) –
Kaiido
我剛剛填寫了一個錯誤報告https://bugzilla.mozilla.org/show_bug.cgi?id=1409992讓我們看看會發生什麼。 – Kaiido