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

我想剪掉这张照片。并为此使用了剪辑路径。这在Safari和Chrome上运行良好，但在Firefox上却不行。我在这个网站上搜索了所有的问题，这是我代码的最后一个形状。但仍然无法在Firefox上运行

这是我的形象：

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

并最终将其添加到我的索引文件中：

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

它必须是

元素。您的标记包含

，据我所知，它甚至不是有效的SVG。这意味着safari和chrome不符合规范。

它必须是

元素。您的标记包含

，据我所知，它甚至不是有效的SVG。这意味着safari和chrome不符合规范。

我认为您有三种Firefox支持选项（我已经测试了所有三种）：

使用绝对路径

引用外部svg文件。使用正确的svg文档格式：

例如：

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

使用内部样式表

---

我认为您有三种Firefox支持选项（我已经测试了所有三种）：

使用绝对路径

引用外部svg文件。使用正确的svg文档格式：

例如：

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

使用内部样式表

---

将其更改为

，但仍然相同。将其更改为

，但仍然相同。阅读此：和此：我删除了url中的引号。并添加了外部svg文件，并将svg代码放入其中。并在

#

之前添加了它的名称。但不幸的是，问题仍然是一样的。并添加了外部svg文件，并将svg代码放入其中。并在

#

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

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