我如何在一个伪元素上获取clipPath SVG以便在数据URL之外的IE11 / Edge中工作？

Question

我正在尝试创建一个圆形的渐变边框，其中的内容可以是透明的。这排除了在内容下方放置背景渐变元素的标准方法。另一个要求是它可以在IE11和Edge 44 / EdgeHTML 18上运行。

[这在Chrome / Firefox / Safari上很好用，但Microsoft不喜欢引用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，还有更好的选择吗？有没有所有这些重复的东西吗？

谢谢！

我正在尝试创建一个圆形的渐变边框，其中的内容可以是透明的。这排除了在内容下方放置背景渐变元素的标准方法。另一个...

Answer 1

您可以使用CSS媒体查询来检测Microsoft Edge浏览器，然后使用base64数据。代码如下（https://jsfiddle.net/Lacwmyeg/）：