Как я могу получить clipPath SVG для псевдоэлемента для работы в IE11 / Edge помимо URL-адреса данных? - PullRequest
Новая
       46

Как я могу получить clipPath SVG для псевдоэлемента для работы в IE11 / Edge помимо URL-адреса данных?

1 голос
/ 18 января 2020

Я пытаюсь создать закругленную градиентную границу, где содержимое может быть прозрачным. Это исключает стандартные подходы размещения элемента градиента фона под содержимым. Другое требование заключается в том, что он работает вплоть до IE11 и Edge 44 / Edge HTML 18.

. Это прекрасно работает в Chrome / Firefox / Safari, но Microsoft не нравится CSS путь клипа, ссылающийся на Идентификатор SVG: https://jsfiddle.net/jfowu0xn/1/

<svg>
  <defs>
    <clipPath id="datClip">
      <path d="M50,0 h400 a50,50 0 0 1 50,50 v0 a50,50 0 0 1 -50,50 h-400 a50,50 0 0 1 -50,-50 v0 a50,50 0 0 1 50,-50 M50,10 a40,40 0 0 0 -40,40 v0 a40,40 0 0 0 40,40 h400 a40,40 0 0 0 40,-40 v0 a40,40 0 0 0 -40,-40 h-400 z" />
    </clipPath>
  </defs>
</svg>
...
  -webkit-clip-path: url(#datClip);
  clip-path: url(#datClip);
...

Единственное, что я могу выяснить, что работает до IE11 - это поместить градиент в SVG, кодировать base64 и шлепнуть его в качестве фонового изображения. Это не работает в Chrome, хотя, ха-ха: https://jsfiddle.net/7Lhosj53/

SVG зависит от ширины, высоты и градиента, и я пишу каркас пользовательского интерфейса, поэтому каждая комбинация этих все это еще ~ 800 байт SVG на странице. Тьфу.

Есть ли что-нибудь лучше без base64? Есть ли что-то без всего этого дублирования?

Спасибо!

1 Ответ

0 голосов
/ 19 января 2020

Вы можете использовать CSS медиазапросы для обнаружения браузера Microsoft Edge, а затем, используя данные base64. Код, как показано ниже (https://jsfiddle.net/Lacwmyeg/): 

    body {
        background: pink;
    }
    div {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 500px;
        height: 100px;
        background: rgba(0, 255, 0, 0.2);
        border-radius: 50px;
        z-index: 2;
        box-sizing: border-box;
    }

    div:after {
        content: '';
        width: inherit;
        height: inherit;
        box-sizing: inherit;
        position: inherit;
        background: linear-gradient(red, blue);
        -webkit-clip-path: url(#datClip);
        clip-path: url(#datClip);
    }

    @supports (-ms-ime-align:auto) {
        /* IE Edge 16+ CSS */
        div:after { 
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iMTAwIj4gPGRlZnM-IDxjbGlwUGF0aCBpZD0iZGF0Q2xpcCI-IDxwYXRoIGQ9Ik01MCwwIGg0MDAgYTUwLDUwIDAgMCAxIDUwLDUwIHYwIGE1MCw1MCAwIDAgMSAtNTAsNTAgaC00MDAgYTUwLDUwIDAgMCAxIC01MCwtNTAgdjAgYTUwLDUwIDAgMCAxIDUwLC01MCBNNTAsMTAgYTQwLDQwIDAgMCAwIC00MCw0MCB2MCBhNDAsNDAgMCAwIDAgNDAsNDAgaDQwMCBhNDAsNDAgMCAwIDAgNDAsLTQwIHYwIGE0MCw0MCAwIDAgMCAtNDAsLTQwIGgtNDAwIHoiIC8-IDwvY2xpcFBhdGg-IDxsaW5lYXJHcmFkaWVudCBpZD0ibXlHcmFkaWVudCI-IDxzdG9wIG9mZnNldD0iNSUiIHN0b3AtY29sb3I9InJlZCIgLz4gPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9ImJsdWUiIC8-IDwvbGluZWFyR3JhZGllbnQ-IDwvZGVmcz4gPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSIxMDAiIGNsaXAtcGF0aD0idXJsKCNkYXRDbGlwKSIgZmlsbD0idXJsKCNteUdyYWRpZW50KSI-PC9yZWN0PiA8L3N2Zz4");
        }
    }

Кроме того, есть другой пример кода без использования данных SVG и base64, вы можете сослаться на него (https://jsfiddle.net/Lacwmyeg/1/ ): 

<style type="text/css">
    .gradient-box {
        display: flex;
        width: 500px;
        height: 100px;
        position: relative;
        box-sizing: border-box;
        color: #fff;
        background: rgba(0, 255, 0, 0.2);
        background-clip: padding-box;
        border: solid 5px transparent;
        border-radius: 50px;
    }

        .gradient-box:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            margin: -5px;
            border-radius: inherit;
            background: linear-gradient(to right, red, blue);
        }

    body {
        margin: auto;
        background: pink;
    }
</style>
<div class="gradient-box">
    <div style="border-radius: 50px; background-color:papayawhip; width:100%">

    </div>
</div>
...