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

时间:2016-03-27 14:09:12

标签: css firefox polygon clip-path

我想剪切图像。并使用剪辑路径。这适用于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。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

我认为你有三个Firefox支持选项(我测试了所有三个):

  1. 使用绝对路径。

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

  3. 例如:

    <?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);
    
    1. 使用内部样式表。