html - svg 图像元素回退

Question

我有一个 svg 格式的图像；图片的 url 可能是一个不可访问的文件。如果无法访问原始文件，是否可以使用后备 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');
    }
}

编辑:经典错误!我只用一个不存在的图像测试了代码。正如预期的那样，它非常失败。刚才，我意识到我忘记了使用现有图像进行测试 - 它，呃，嗯，也失败并替换了(现有)图像 - 虽然这次我不会将失败描述为美妙..

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