我有一个SVG，其中包含3个<image>标记和一个<rect>，这些标记都应用了剪贴板路径。在除IE和Edge之外的所有浏览器上，剪辑路径沿着边缘平滑地应用，但在IE上它看起来是锯齿状的。
我尝试过将sharp-rendering =“crispEdges”/ sharp-rendering =“geometricPrecision”应用到SVG和所有嵌套元素中，但没有运气。
这是Edge上的截图 - Windows 10： https://imgur.com/a/Ntaczmq
代码：
<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>