0

When displaying some SVG icons within an SVG of a fixed width, they should be clipped to the width of that SVG container.

In all sensible browsers this works fine but in IE11 the icons extend beyond the width of the container.

Is there any workaround to counter this behaviour?

<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: enter image description here Chrome: enter image description here

Improve this question
6
  • Don't nest SVG tags - more people are doing this now, but browsers don't test for this use case - and people are running into lots of bugs. Use the g element instead.
    – Michael Mullany
    Commented Jun 8, 2021 at 12:06
  • try setting overflow="hidden" explicitly on the svg tag of the overflowing content. This is the default but perhaps IE needs a nudge.
    – Robert Longson
    Commented Jun 8, 2021 at 12:58
  • @MichaelMullany I don't see why you wouldn't nest SVGs, you seriously limit your options using only g elements and I've never seen or read anything to say it's a bad idea. For prosperity I changed it to have no nested svg elements and only use a g element. Same problem occurs.
    – drevans
    Commented Jun 8, 2021 at 13:21
  • @RobertLongson I did experiment with adding overflow="hidden" at various levels, no change in functionality doesn't appear to honour it.
    – drevans
    Commented Jun 8, 2021 at 13:29
  • 1
    you might need to define and use an explicit clip-path then.
    – Robert Longson
    Commented Jun 8, 2021 at 13:32

1 Answer 1

Reset to default
1

IE9-11 & Edge don't properly scale SVG files. You can add height, width, viewBox and CSS rules as workarounds.

I tried the overflow CSS style mentioned, and it works fine. How do you test the code? The reason it doesn't work in your side may be related to the browser cache, please try to clear IE cache and test again.

Edit: I refer to the code you provide, and it has such a problem: If you use the <g> element, I think you also need to use clip CSS to achieve the same effect.

This is a simple sample:

<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>

Result in IE 11:

enter image description here

Improve this answer
4
  • Now that is interesting! It does indeed work for this example and I wonder whether there is something to this. However, when I applied the overflow attribute on the real world code which is considerably more complicated with many more levels it still exhibits the same problem. The task svg in our real problem is really a g element, with many more g elements above it until we do eventually hit an svg. I simply removed all those levels to make the example more concise. Simply putting one g element level in the chain to wrap the rect and svg and the problem comes back.
    – drevans
    Commented Jun 9, 2021 at 16:53
  • Annoyingly I can't comment the HTML but here is a codepen link with the modified HTML with overflow specified exhibiting the same problem in IE. Codepen
    – drevans
    Commented Jun 9, 2021 at 16:58
  • @drevans I've edited my answer and edited the code according to your Codepen, please check it.
    – Yu Zhou
    Commented Jun 10, 2021 at 3:14
  • Yesterday I was experimenting with clipPath based on the comment from @RobertLongson. I reached the same conclusion only difference being I embedded the rect within the clipPath: <clipPath id="myClip" ><rect height="18" width="46"/></clipPath>
    – drevans
    Commented Jun 10, 2021 at 8:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.