svg图像元素后备

Question

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

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

编辑 ：经典错误！ 我仅使用不存在的图像测试了代码。 它失败了，而且出乎意料。 刚才，我意识到我忘了用现有的图像进行测试-它，呃，嗯，也失败了，并替换了（现有的）图像-尽管这次我不会将失败描述为很棒。

不知道您必须检查哪个属性，或者不确定是否有办法判断图像是否加载正确。 抱歉!