html - svg 图像元素后备

Question

我在 svg 中有一张图片；图片的 url 可能是不可访问的文件。如果无法访问原始文件，是否可以有一个后备网址？

<svg>
    <image width="150" height="150" xlink:href="http://placehold.it/150.png" />
</svg>

Answer 1

是的，似乎确实如此。

在win7下的Chrome中测试。

window.addEventListener('load', mInit, false);

var fallbackImgSrc = "img/girl.png";

function mInit()
{
    var svgImgs = document.querySelectorAll('svg image');
    var i, n = svgImgs.length;
    for (i=0; i<n; i++)
    {
        if (svgImgs[i].clientWidth == 0 && svgImgs[i].clientHeight == 0)
        {
            console.log('failed - replacing');
            svgImgs[i].href.baseVal = fallbackImgSrc;
        }
        else
            console.log('loaded');
    }
}

编辑：经典错误！我只用不存在的图像测试了代码。它出乎意料地失败了。刚才，我意识到我忘了用现有的图像进行测试——它，呃，嗯，也失败了并替换了（现有的）图像——尽管这次我不会把失败描述为美妙的......

不确定您必须检查哪个属性，或者即使有办法判断图像加载是否正常。对不起！