Question

经过一番研究后，我发现Chrome和Opera如果有绝对路径就会在foreignObject中渲染图像，Firefox只有在数据为uri格式时才渲染图像，因为它不会加载任何外部资源。

我尝试了几种方法，但我找不到一种方法来检测这种行为，例如我试图检查foreignObject中图像的尺寸，但它们总是正确的，Firefox只是绘制一个透明的矩形具有相同的图像大小。

你知道怎么做吗？

CODE 这种情况很难重现，但你可以用这种方式测试它：

转到Google首页
在Chrome上打开firebug控制台或javascript控制台
执行此代码：

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

构建一个带有<foreignObject>标记的SVG文件，该文件链接到外部png或gif图像。如果图像只有一种颜色，可能会更容易。
使用HTML <img>标记加载图片，例如<img id="imgRect" style="display:none" width="100" height="50" src="test.svg">
将图像复制到画布
当图片加载完毕后，从您希望看到外部png显示位置的画布上读取颜色

这适用于Firefox，因为它不会污染画布并在将SVG图像加载到其中时使其成为只写。我不确定Chrome是否仍会污染画布，如果确实如此，则第4步将失败。

以下是第3步的一些代码。

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

foreignObject内绝对url图像的特征检测

2 个答案: