SVG 图像未被裁剪为 IE11 中 SVG 容器的宽度

Question

在固定宽度的 SVG 中显示某些 SVG 图标时，应将它们裁剪到该 SVG 容器的宽度。

在所有合理的浏览器中，这都可以正常工作，但在 IE11 中，图标超出了容器的宽度。

是否有解决此问题的方法？

<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <svg class="task" width="50">
        <rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
        <svg class="svgs-using-def-with-image-href" x="4" y="5">
            <use href="#GreenTick" x="0"/>
            <use href="#Triangle" x="18"/>
            <use href="#Facebook" x="36"/>
        </svg>

        <svg class="reusable-icons" width="0" height="0">
            <defs>
                <svg id="GreenTick" width="18" height="18">
                    <image href="https://svgur.com/i/XvH.svg" width="18" height="18"/>
                </svg>
                <svg id="Triangle" width="18" height="18">
                    <image href="https://svgur.com/i/XwA.svg" width="18" height="18"/>
                </svg>
                <svg id="Facebook" width="18" height="18">
                    <image href="https://svgur.com/i/Xx8.svg" width="18" height="18"/>
                </svg>
            </defs>
        </svg>
    </svg>
</body>
</html>

IE11: Chrome:

Answer 1

IE9-11 和 Edge 无法正确缩放 SVG 文件。您可以添加高度、宽度、viewBox 和 CSS 规则作为解决方法。

我尝试了提到的 overflow CSS 样式，效果很好。你如何测试代码？在你这边不行的原因可能是浏览器缓存有关，请尝试清除IE缓存再测试。

编辑：我参考了你提供的代码，它有这样的问题：如果你使用<g>元素，我想你也需要使用clipCSS达到同样的效果

这是一个简单的示例：

<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <svg class="resource-row" data-level="1" x="0" y="0" width="100%" height="576" overflow="hidden">
        <g class="task" overflow="hidden" clip-path="url(#clip)">
            <rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
            <svg class="svgs-using-def-with-image-href" x="4" y="5" width="46" overflow="hidden">
                <use href="#GreenTick" x="0" />
                <use href="#Triangle" x="18" />
                <use href="#Facebook" x="36" />
            </svg>
        </g>
    </svg>
    <svg class="reusable-icons" width="0" height="0">
        <defs>
            <rect class="task-rectangle" id="rect" width="50" height="50"></rect>
            <clipPath id="clip">
                <use xlink:href="#rect" />
            </clipPath>
            <svg id="GreenTick" width="18" height="18">
                <image href="https://svgur.com/i/XvH.svg" width="18" height="18" />
            </svg>
            <svg id="Triangle" width="18" height="18">
                <image href="https://svgur.com/i/XwA.svg" width="18" height="18" />
            </svg>
            <svg id="Facebook" width="18" height="18">
                <image href="https://svgur.com/i/Xx8.svg" width="18" height="18" />
            </svg>
        </defs>
    </svg> 
</body>
</html>

IE 11 中的结果：

SVG 图像未被裁剪为 IE11 中 SVG 容器的宽度

SVG images not being clipped to width of SVG container in IE11

html

icons

svg

internet-explorer-11