Firefox、Opera 中剪辑路径中的滑块，

Posted 2023-02-25

【中文标题】Firefox、Opera 中剪辑路径中的滑块，

【英文标题】：Slider in a clip path in Firefox, Opera,

【发布时间】：2015-12-17 09:37:10

【问题描述】：

我目前正在开发一个在剪辑路径中带有图像滑块的单页网站。这里的例子： http://grafomantestsite3.be/。

这是一小段代码：

#slide1 
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  -webkit-clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);

<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>

滑块是使用 Concrete5 中的块生成的。所以图片滑块的 html 代码是使用脚本生成的。

这似乎适用于 Chrome，但不适用于 Firefox、Opera、Internet Explorer...

有没有简单的方法来解决这个问题？我知道 SVG 方法，但这似乎不起作用，因为您需要在 HTML 中设置背景图像？而这里这是不可能的。

任何帮助将不胜感激。

提前致谢。

编辑：

所以我尝试了 SVG 方法并将其添加到 HTML 正文中：

#slide1 
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
  /*Firefox*/
  clip-path: url("#clipPolygon");

<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>


<svg  >
  <clipPath id="clipPolygon">
    <polygon points="0 500,960 450,960 0,0 0">
    </polygon>
  </clipPath>
</svg>

但这似乎不起作用。我做错了什么？

【参考方案1】：

首先，-webkit-clip-path 仅适用于基于 webkit 的浏览器（Chrome/Safari/Opera）。如果要在 Firefox 上使用剪辑路径，还需要使用 clip-path。

见：http://caniuse.com/#feat=css-clip-path

另一个问题是 Firefox 还不支持像 polygon() 这样的 CSS 形状用于剪辑路径。您需要在 SVG 中定义一个多边形并使用 clip-path: url(#id-of-your-polygon-element) 引用它。

【讨论】：

我尝试使用 SVG 进行试验，但似乎无法使其正常工作。我应该在哪里添加 SVG 元素？在标题中？还是这无关紧要？

我似乎无法将 SVG 应用于 div #slide1

SVG 应该内联在您的 HTML 中。这里有一个例子：css-tricks.com/clipping-masking-css

我编辑了上面的代码（目前不工作）

对我来说工作正常。如果你给#slide1 一个背景颜色，让它实际上是可见的，你可以看到剪辑正在发生。