Firefox和IE不呈现SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
    <title>bin</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="add-to-cart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M1.77777778,4.44355556 L1.77777778,15.1102222 C1.77777778,16.0897778 2.57511111,16.888 3.55555556,16.888 L12.4444444,16.888 C13.4248889,16.888 14.2222222,16.0897778 14.2222222,15.1102222 L14.2222222,4.44355556 L1.77777778,4.44355556 Z M7.11111111,13.3333333 L5.33333333,13.3333333 L5.33333333,8 L7.11111111,8 L7.11111111,13.3333333 Z M10.6666667,13.3333333 L8.88888889,13.3333333 L8.88888889,8 L10.6666667,8 L10.6666667,13.3333333 Z M10.6666667,1.77688889 L16,1.77688889 L16,3.55466667 L0,3.55466667 L0,1.77688889 L5.33333333,1.77688889 L5.33333333,0 L10.6666667,0 L10.6666667,1.77688889 Z" id="bin" fill="#00cc66" fill-rule="nonzero"></path>
    </g>
</svg>

SVG以HTML格式显示,如下所示:

<div id="tools">
    <div id="clearbutton" class="button" title="Clear Drawings">
        <svg>
            <image href="image/bin.svg" />
        </svg>
    </div>
</div>

CSS格式:

svg {
    width: 28px;
    height: 28px;
    padding: 8px 6px 6px 6px;
}

svg image {
    width: 16px;
    height: 100%;
}

我尝试更改并禁用CSS中的显式宽度/高度属性,但没有效果。svg标记的大小可以调整为任意大的大小,但是图像标记保持为0 x 0。

在Chrome和Opera中,图像显示正确。在其他浏览器中,我可以看到大小设置为0 x 0。当我在FF中单独打开图像时,它显示得很好。在FF网络选项卡中,我可以在“响应”字段中看到图像,在“响应”字段中还显示“大小:16 x 17”。边缘相同。在IE11中,“response”字段显示图像,但表示“Size:0x0”。

<image href="image/bin.svg"></image>

但是,即使我添加了结束标记,它仍然不起作用。

我认为这个SVG有问题,或者我显示它的方式有问题。不幸的是,我不能给你一个网站的公共链接,它目前正在开发中,将只提供给注册用户以后。