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