clip-path in a slider does not work on Firefox

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.

Read this: http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to — , Mar 27 '16 at 14:53
And this: http://stackoverflow.com/questions/31772152/svg-clip-path-online-works-if-css-not-linked-but-inline — , Mar 27 '16 at 14:55
I deleted quotes inside the url. And added external svg file and put the svg code in it. and added its name just before `#`. But unfortunately the problem is still the same. — cvdogan, Mar 27 '16 at 15:15

score 1 · Answer 1 · answered Mar 27 '16 at 14:39

1

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.

answered Mar 27 '16 at 14:39

the8472

40,999
5
70
122

Changed it to `` but still the same. – cvdogan Mar 27 '16 at 14:44

score 1 · Accepted Answer · 2016-03-27T17:12:08.143

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.

edited Mar 27 '16 at 17:12

answered Mar 27 '16 at 17:06

I already used an internal stylesheet and it solved the problem. I will try your other options later. Now that is working for all 3 browsers. (safari, chrome, firefox) But the only problem is about google map iframe. When I create a class and put similar code in it. That is working for Safari and Firefox but not Chrome. Do you have any idea for this? – cvdogan Mar 27 '16 at 21:22
1

@cvdogan I have no better idea than to try and experiment with some of the variations. Or wait a few years for consistent browser support. – Mar 28 '16 at 18:53

clip-path in a slider does not work on Firefox

2 Answers2