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： 铬合金：

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-09 08:55:57

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-09 08:55:57

解决方案1
1 已采纳 2021-06-09 08:55:57