试图解决 MS Edge 缺乏对剪辑路径的支持答案

【问题标题】：Trying to workaround MS Edge lack of support for clip-path试图解决 MS Edge 缺乏对剪辑路径的支持
【发布时间】：2020-03-16 21:49:23
【问题描述】：

上下文：Edge 仅支持 <svg> 元素上的剪辑路径。

这是我一直在尝试的。我在<svg> 中有这个<image>，我正在尝试将其设置为背景图像。你知道，background-attachment fixed，background-size cover等等。问题是……如何？

<svg width="100%" height="100%" viewBox="0 0 100 100">
  <defs>
    <clipPath id="highlight-clip-row">
      <polygon points="30 0, 100 0, 100 100, 0 100"/>
    </clipPath>
    <clipPath id="highlight-clip-column">
      <polygon points="0 25, 100 0, 100 100, 0 100"/>
    </clipPath>
  </defs>
  <image id="highlight-image" xlink:href="{{ asset('images/highlight.jpg') }}" height="100%" width="100%"/>
</svg>

以下是不使用<svg>的预期结果（在Firefox上），这在MS Edge上不起作用：

如需此示例，请转至raspberrypi.org。 clip-path 无法在 MS Edge 上运行，因为它使用的是带有背景图像的简单 div。

该图像应该作为 div 的背景图像，它是响应式 flex 容器中的 flex 项。

我尝试省略 xlink:href 属性并简单地将背景图像添加到其元素中，但其上没有显示任何内容。

如果我将这个 <svg> 元素保存为文件并将其作为 div 的背景图像引用，我将如何使用这两个 clipPath 元素？

如果有其他方法可以达到相同的效果，我会很高兴听到。我整天都在寻找。

【问题讨论】：

移除 svg 元素的宽度和高度。然后使用这个工具SVG-encoder，将编码后的结果作为背景图。

标签： html css svg background-image

【解决方案1】：

你能用 svg 作为边缘的后备来试试这个解决方案吗这将适用于 IE9 及更高版本，以及 Firefox 和 Chrome

<svg class="svg-graphic" width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<g>
   <clipPath id="hexagonal-mask">
      <polygon points="30,0 100,0 100,100 0,100" />
   </clipPath>
</g> 
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?cs=srgb&dl=beautiful-beauty-blue-bright-414612.jpg&fm=jpg"/></svg>

【讨论】：