Функция обнаружения изображений абсолютного url внутри foreignObject

Question

После небольшого исследования я обнаружил, что Chrome и Opera выполняют изображения внутри объекта foreignObject, если у них есть абсолютный путь, Firefox отображает изображения только в том случае, если они находятся в формате data-uri, потому что он не загружается любой внешний ресурс.

Я пробовал несколько методов, но я не могу найти способ распознать это поведение, например, я попытался проверить размеры изображения в foreignObject, но они всегда правы, Firefox просто рисует прозрачный прямоугольник с таким же размером изображения.

Вы знаете, как это сделать?

КОД Эта ситуация трудно воспроизвести, но вы можете проверить это следующим образом:

• Перейти к Главной странице Google
• Открыть Firebug консоли или консоль JavaScript в Chrome
• выполнить это код:

:

var img = new Image(); 

img.src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MzgnIGhlaWdodD0nMTkwJz48Zm9yZWlnbk9iamVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48aW1nIHNyYz0iaHR0cHM6Ly93d3cuZ29vZ2xlLml0L2ltYWdlcy9zcnByL2xvZ28xMXcucG5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9Im1hcmdpbjogMHB4OyIvPjwvZm9yZWlnbk9iamVjdD48L3N2Zz4="; 

document.body.appendChild(img); 

на Chrome изображение логотипа видно, на Firefox это не так. Код SVG в кодировке base64, это исходный код:

<svg xmlns="http://www.w3.org/2000/svg" width="538" height="190"> 
<foreignObject width="100%" height="100%"> 
<img src="https://www.google.it/images/srpr/logo11w.png" xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px;"> 
</foreignObject> 
</svg> 

Answer 1

Если агент пользователя (браузер) поддержка не доступна для этой функции вы можете использовать падать обратно технику, поэтому, если браузер не поддерживает эту функцию будет оказывать «ни один иностранный объект не поддерживается»:

<switch> 
    <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" requiredExtensions="http://www.w3.org/1999/xhtml"> 
    <foreignObject > 
    </foreignObject> 
    </g> 
    <text font-size="10" font-family="Verdana"> 
    No foreign Object supported 
    </text> 
</switch> 

или, если вы хотите, чтобы обнаружить его в JavaScript, простейшим вы можете попробовать:

if(typeof SVGForeignObjectElement !== 'undefined') 
    alert('It support feature'); 

или вы можете использовать hasFeature

var flag= document.implementation.hasFeature("feature","version"); 

Параметры

особенность Является DOMString, представляющая имя функции.

версия Является DOMString, представляющим версию спецификации, определяющую функцию.

Answer 2

1. Построить SVG-файл с тегом <foreignObject>, который ссылается на внешний png или gif-образ. Наверное, проще, если изображение имеет один цвет.
2. Загрузите изображение с помощью тега HTML <img>, например.<img id="imgRect" style="display:none" width="100" height="50" src="test.svg">
3. Скопируйте изображение в холст
4. Когда изображение загрузится, считывать цвет из холста на месте вы ожидаете увидеть внешний PNG отображается

Это будет работать на Firefox, как это Безразлично 't испортить холст и сделать его только для записи, когда в него загружается изображение SVG. Я не уверен, что Chrome по-прежнему теряет холст, если это произойдет, то шаг 4 завершится неудачно.

Вот некоторый код для шага 3.

var canvas = document.getElementById("canvas1"); 
var ctx = canvas.getContext("2d"); 
var img = document.getElementById("imgRect"); 
ctx.drawImage(img, 0, 0);