经过一些研究后,我发现如果 Chrome 和 Opera 具有绝对路径,它们会在 foreignObject 中渲染图像,而 Firefox 仅在图像为 data-uri 格式时才渲染图像,因为它不会加载任何外部资源。
我尝试了几种方法,但我找不到一种方法来检测这种行为的特征,例如,我试图检查 foreignObject 中图像的尺寸,但它们总是正确的,Firefox 只是绘制了一个透明矩形具有相同的图像大小。
你知道怎么做吗?
代码 这种情况很难重现,但你可以这样测试:
- 转到谷歌主页
- 在 Chrome 上打开 firebug 控制台或 javascript 控制台
- 执行这段代码:
:
var img = new Image();
img.src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MzgnIGhlaWdodD0nMTkwJz48Zm9yZWlnbk9iamVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48aW1nIHNyYz0iaHR0cHM6Ly93d3cuZ29vZ2xlLml0L2ltYWdlcy9zcnByL2xvZ28xMXcucG5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9Im1hcmdpbjogMHB4OyIvPjwvZm9yZWlnbk9iamVjdD48L3N2Zz4=";
document.body.appendChild(img);
在 Chrome 上, Logo 图像是可见的,在 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>
最佳答案
如果用户代理(浏览器)不支持此功能,您可以使用回退技术,因此如果浏览器不支持此功能,将呈现“不支持外部对象”:
<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,表示定义该功能的规范版本。
关于javascript - foreignObject中绝对url图片的特征检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20772366/