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

【问题标题】：SVG images not being clipped to width of SVG container in IE11SVG 图像未在 IE11 中被裁剪为 SVG 容器的宽度
【发布时间】：2021-06-10 11:12:18
【问题描述】：

当在一个固定宽度的 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：

【问题讨论】：

不要嵌套 SVG 标签——现在有更多的人这样做，但是浏览器没有测试这个用例——人们遇到了很多错误。请改用 g 元素。
尝试在溢出内容的 svg 标签上显式设置 overflow="hidden"。这是默认设置，但 IE 可能需要轻推。
@MichaelMullany 我不明白你为什么不嵌套 SVG，你只使用 g 元素严重限制了你的选择，我从未见过或读过任何东西说这是一个坏主意。为了繁荣，我将其更改为没有嵌套的 svg 元素，并且只使用 g 元素。出现同样的问题。
@RobertLongson 我确实尝试在各个级别添加 overflow="hidden"，但功能上没有任何变化似乎无法兑现。
您可能需要定义并使用显式剪辑路径。

标签： html svg icons internet-explorer-11

【解决方案1】：

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

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

编辑：我参考你提供的代码，有这样一个问题：如果你使用<g>元素，我想你也需要使用clip CSS来实现效果一样。

这是一个简单的示例：

<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 中的结果：

【讨论】：

这很有趣！它确实适用于这个例子，我想知道这是否有什么问题。但是，当我将overflow 属性应用于现实世界的代码时，该属性要复杂得多，级别要多得多，它仍然会出现同样的问题。在我们真正的问题中，任务svg 实际上是一个g 元素，在它上面还有更多g 元素，直到我们最终遇到svg。我只是删除了所有这些级别以使示例更简洁。只需在链中添加一个g 元素级别来包装rect 和svg，问题就回来了。
令人讨厌的是，我无法评论 HTML，但这里有一个 codepen 链接，其中包含修改后的 HTML，其中指定的溢出在 IE 中表现出相同的问题。 Codepen
@drevans 我已经根据你的 Codepen 编辑了我的答案并编辑了代码，请检查一下。
昨天我根据@RobertLongson 的评论对clipPath 进行了试验。我得出了相同的结论，唯一的区别是我将rect 嵌入到clipPath 中：<clipPath id="myClip" ><rect height="18" width="46"/></clipPath>