9

经过一番研究，我发现如果 Chrome 和 Opera 具有绝对路径，则它们会在 foreignObject 中渲染图像，而 Firefox 仅在它们为 data-uri 格式时才会渲染图像，因为它不加载任何外部资源。

我已经尝试了几种方法，但我找不到一种方法来检测这种行为，例如我试图检查 foreignObject 中图像的尺寸，但它们总是正确的，Firefox 只是简单地绘制了一个透明的矩形图片尺寸。

你知道怎么做吗？

CODE 这种情况很难重现，但是可以这样测试：

  • 转到谷歌主页
  • 在 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>
4

2 回答 2

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");

参数

feature 是一个 DOMString 表示功能名称。

version 是一个 DOMString，表示定义特性的规范版本。

于 2013-12-30T09:37:19.377 回答
0
  1. 构造一个带有<foreignObject>标签的 SVG 文件，该标签链接到外部 png 或 gif 图像。如果图像具有单一颜色，可能会更容易。
  2. 使用 HTML<img>标签加载图像，例如<img id="imgRect" style="display:none" width="100" height="50" src="test.svg">
  3. 将图像复制到画布中
  4. 加载图像后，在您希望看到显示的外部 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);
于 2014-01-01T15:54:14.520 回答