试图解决MS Edge缺少对剪切路径的支持

Question

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

这就是我一直在尝试的方法。我在<image>中有这个<svg>，并且我正在尝试将其设置为背景图像。您知道，固定了背景附件，背景尺寸保护套等等。问题是...如何？

<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的背景图像，该div是响应式flex容器中的flex项。

我试图省略xlink:href属性，只是在其元素中添加背景图像，但是没有任何显示。

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

如果还有另一种方法可以达到相同的效果，我将很高兴听到。我整天都在搜索。

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