Как отобразить SVG (клип-путь) в IE и Edge с гладкими краями - PullRequest
Новая
       26

Как отобразить SVG (клип-путь) в IE и Edge с гладкими краями

0 голосов
/ 03 мая 2018

У меня есть SVG, который содержит 3 <image> тега и <rect>, ко всем из которых применен путь клипа. Во всех браузерах, кроме IE и Edge, путь клипа плавно применяется по краям, но в IE он выглядит неровным.

Я попытался применить sharp-render = "crispEdges" / sharp-render = "geometryPrecision" к 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>
...