clip-path in a slider does not work on Firefox - css

Question

I want to cut the image. And used clip-path for this. That worked fine for Safari and Chrome but not Firefox. I searched all questions in this website and this is the last shape of my code. But still couldn't make it works on Firefox.
This is my image:
<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">
And this is my CSS:
.sliderimg {
width: 100%;
height: 357px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
/*Firefox*/
clip-path: url("#slider-poly");
}
And finally added this to my index file:
<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>
But still that is working on Safari and Chrome, but not Firefox.

Answer 1

I think you have three options for Firefox support (I have tested all three):
Using an absolute path.
Referring to an external svg file. Use a correct svg document format: https://www.w3.org/TR/SVG/struct.html
For example:
<?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>
In your stylesheet:
clip-path: url(filename.svg#slider-poly);
Using an internal stylesheet.

Answer 2

Spec says it must be a <clipPath> element. Your markup contains <imagePath>, which as far as I can tell is not even valid SVG. Which means safari and chrome are not spec-compliant.