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');
    }
}

编辑：经典错误！我只用不存在的图像测试了代码。它失败了，并且符合预期。刚才，我意识到我忘了用现有的图像进行测试 - 呃，呃，也失败了，取而代之的是（现有的）图像 - 虽然这次我不会把失败描述得很精彩..

不确定您需要检查哪个属性，或者即使有办法判断图像是否正常加载。遗憾！