除了数据 url 之外，如何让伪元素上的剪辑路径 SVG 在 IE11/Edge 中工作？

Posted 2023-03-28

【中文标题】除了数据 url 之外，如何让伪元素上的剪辑路径 SVG 在 IE11/Edge 中工作？

【英文标题】：How can I get clipPath SVG on a pseudoelement to work in IE11/Edge besides a data url?

【发布时间】：2020-05-04 23:58:22

【问题描述】：

我正在尝试创建一个内容可以透明的圆形渐变边框。这排除了将背景渐变元素放在内容下方的标准方法。另一个要求是它适用于 IE11 和 Edge 44/Edgehtml 18。

这在 Chrome/Firefox/Safari 上效果很好，但微软不喜欢引用 SVG ID 的 CSS 剪辑路径：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 依赖于宽度、高度和渐变，我正在编写一个 UI 框架，因此这些东西的每一个组合都是页面中另外约 800 字节的 SVG。啊。

没有base64还有什么更好的吗？有没有所有这些重复的东西？

谢谢！

【参考方案1】：

您可以使用 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>

【讨论】：

因为它是一个 UI 框架，我在运行时生成 CSS 和 HTML，所以 IE 与 WebKit 的不同内容不是问题。我不能使用 z-index -1 技巧，因为我需要在渐变边框内支持完全透明，而奇怪的堆叠上下文规则会将渐变放在盒子的兄弟姐妹后面。