Html 尝试解决MS Edge缺少对剪辑路径的支持的问题

上下文：Edge仅支持

元素上的剪辑路径

这就是我一直在尝试的。我把这个

放在一个

中，我试着把它设计成一个背景图像。你知道，背景附件固定，背景大小封面等等。问题是。。。怎么做

<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>

以下是（在Firefox上）未使用MS Edge不起作用的

的预期结果：

有关这方面的实例，请转到<代码>剪辑路径在MS Edge上不起作用，因为它使用的是带有背景图像的简单div

此图像应作为div的背景图像，div是响应flex容器中的flex项

我试图省略

xlink:href

属性，只向其元素添加背景图像，但没有显示任何内容

如果我将此

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

clipPath

元素

---

如果有其他方法可以达到同样的效果，我很乐意听到。我已经搜索了一整天。

您可以尝试使用svg作为edge的后备方案吗 这将适用于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>

---

删除svg元素的宽度和高度。然后使用此工具，并使用编码结果作为背景图像。