SVG images not being clipped to width of SVG container in IE11
Question
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: Chrome:
1 answers
solution1
1 ACCPTED 2021-06-09 08:55:57
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.