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

我想剪切图像。并使用剪辑路径。对于Safari和Chrome而言，这并行，但不适用于Firefox。我搜索了这个网站的所有问题，这是我的代码的最后一个形状。但仍然无法让它在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。

来源

2016-03-27 cvdogan

阅读此：http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to –

而这：http：///stackoverflow.com/questions/31772152/svg-clip-path-online-works-if-css-not-linked-but-inline –

我删除了URL内的引号。并添加外部svg文件并将其中的svg代码。并在'＃'之前添加它的名字。但不幸的是，问题仍然是一样的。 – cvdogan

我觉得你对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);

使用内部样式表。

来源

2016-03-27 17:06:17

我已经使用了一个内部样式表，它解决了这个问题。我会在稍后尝试其他选项。现在适用于所有3种浏览器。（safari，chrome，firefox）但唯一的问题是关于谷歌地图iframe。当我创建一个类并在其中放入类似的代码时。这适用于Safari和Firefox，但不适用于Chrome。你有什么想法吗？ – cvdogan

@cvdogan我没有更好的想法，试图尝试一些变化。或者等待几年来获得一致的浏览器支持。 –

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

来源

2016-03-27 14:39:46 the8472

更改为''但仍然一样。 – cvdogan

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

回答

相关问题