滑块中的剪辑路径在 Firefox 上不起作用答案

【问题标题】：clip-path in a slider does not work on Firefox滑块中的剪辑路径在 Firefox 上不起作用
【发布时间】：2016-03-28 01:12:08
【问题描述】：

我想剪切图像。并为此使用了剪辑路径。这适用于 Safari 和 Chrome，但不适用于 Firefox。我搜索了这个网站上的所有问题，这是我的代码的最后一个形状。但仍然无法在 Firefox 上运行。

这是我的图片：

<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">

这是我的 CSS：

.sliderimg {
   width: 100%;
   height: 357px;
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
   /*Firefox*/
   clip-path: url("#slider-poly");
}

最后将它添加到我的索引文件中：

<svg width="0" height="0">
    <defs>
      <clipPath id="slider-poly"  clipPathUnits="objectBoundingBox">
        <polygon points="0 0, 1 0, 1 0.85, 0 1" />
      </clipPath >
  </defs>
</svg>

但这仍然适用于 Safari 和 Chrome，但不适用于 Firefox。

【问题讨论】：

阅读：stackoverflow.com/questions/940451/…
还有这个：stackoverflow.com/questions/31772152/…
我删除了网址中的引号。并添加外部 svg 文件并将 svg 代码放入其中。并在# 之前添加了它的名字。但不幸的是问题还是一样。

标签： css firefox polygon clip-path

【解决方案1】：

我认为你有 Firefox 支持的三个选项（我已经测试了所有三个）：

使用绝对路径。
引用外部 svg 文件。使用正确的 svg 文档格式：https://www.w3.org/TR/SVG/struct.html

例如：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <defs>
    <clipPath id="slider-poly">
    <polygon points="100,0 300,0 200,200"/>
    </clipPath>
  </defs>
</svg>

在您的样式表中：

clip-path: url(filename.svg#slider-poly);

使用内部样式表。

【讨论】：

我已经使用了一个内部样式表，它解决了这个问题。我稍后会尝试你的其他选择。现在这适用于所有 3 个浏览器。 (safari, chrome, firefox) 但唯一的问题是关于谷歌地图 iframe。当我创建一个类并将类似的代码放入其中时。这适用于 Safari 和 Firefox，但不适用于 Chrome。你对此有什么想法吗？
@cvdogan 我没有比尝试和试验一些变化更好的主意了。或者等待几年以获得一致的浏览器支持。

【解决方案2】：

Spec says 必须是 <clipPath> 元素。您的标记包含<imagePath>，据我所知，它甚至不是有效的 SVG。这意味着 safari 和 chrome 不符合规范。

【讨论】：

改成<clipPath>还是一样。