Internet explorer 如何在IE和具有平滑边的边上显示SVG（剪辑路径）

我有一个SVG，它包含3个

标记和一个

标记，所有标记都应用了剪辑路径。在除IEs和Edge之外的所有浏览器上，剪辑路径沿边缘平滑应用，但在IE上，它看起来是锯齿状的

我尝试将sharp rendering=“crispEdges”/sharp rendering=“geometricsprecision”应用于SVG和所有嵌套元素，但没有成功

以下是Edge上的屏幕截图-Windows 10：

守则：

<svg viewBox="0 0 2300 820" width="100%" height="100%" xml:space="preserve" shape-rendering="sharpEdges">
    <image width="100%" height="100%" clip-path="url(#myClip)" class="banner-fill" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ content.field_banner_image.0 }}" shape-rendering="sharpEdges"></image>
    <image clip-path="url(#myClip)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ content.field_banner_image.0 }}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" shape-rendering="sharpEdges"></image>
    <rect clip-path="url(#myClip)" height="100%" width="100%" x="0" y"0" style="fill:rgba(0,0,0,0.5);" shape-rendering="sharpEdges"></rect>
    <image clip-path="url(#myClip)" class="banner-blob" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/themes/custom/turley/media/images/banners/shape-4.svg" x="-177px" y="-150px" width="1600" height="1600" shape-rendering="sharpEdges"></image>
    <defs>
        <clipPath id="myClip">
            <path class="st0" d="M2300,0H0v695.2c680.4,90.6,1336.6,143.5,1779.3,118.6c204.4-7.5,383-85,520.7-218.1V0z" shape-rendering="sharpEdges"></path>
        </clipPath>
    </defs></svg>

---

Hi Lewis，首先进入IE工具>Internet选项>高级选项卡，选中“始终记录开发人员控制台消息”。保存更改。现在，当您在IE中显示f12工具时，console选项卡将列出标记错误，包括svg标记错误。您提供的svg源代码不适合我们进行调试。从IE dev工具复制并粘贴计算源，该工具将包括图像文件的解析路径。f12>DOM资源管理器选项卡，查找>SVG，右键单击DOM资源管理器中选定的SVG元素或其父div，然后从上下文菜单中选择复制外部html。