Question

我有一组SVG图像，可以在Chrome和Opera中完美呈现，但无法在FF和IE11和Edge中显示。这是一个这样的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中的显式width / height属性，但无济于事。 svg标签将被调整为任何大尺寸，但是图像标签保持为0 x 0。

在Chrome和Opera中，图像可以正确显示。在其他浏览器中，我可以看到大小设置为0 x0。当我在FF中分别打开图像时，它显示得很好。在FF网络标签中，我可以在“响应”字段中看到该图像，并且在“响应”字段中还显示“大小：16 x 17”。在Edge中也一样。在IE11中，“响应”字段显示图像，但显示“大小：0 x 0”。

我确实注意到IE在抱怨我应该对“ image”标签使用显式的结束标签。 Firefox自动添加以下内容：

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

但是，即使我添加了结束标记，也仍然无法正常工作。

我认为此SVG或我的显示方式有问题。不幸的是，我无法为您提供该站点的公共链接，该站点正在开发中，以后将仅对注册用户开放。

Firefox和IE无法呈现SVG

0 个答案: