CODEWITHSUNDEEP
htmlcsssvgclip-path
user4821826
user4821826

Reputation: 129

Clip-path doesn't work in firefox [% values]

I am trying to run svg clip-path in mozilla but it doesn't work. 

.mask-1 {
    -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
    clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
}

It works in chrome perfectly. Can anyone can help me out with mozilla and other browsers?

Upvotes: 11

Views: 23095

Answers (4)

Krzysztof Krzeszewski
Krzysztof Krzeszewski

Reputation: 6714

I have tried other solutions and couldn't get them to work so I have decided to ignore the clippath altogether and instead use the fill property. Fortunately for my use case clipping has been limited to cutting the % of the side of the svg so it wasn't that difficult to implement.

Using the transparent linear gradient I ended up with something like this:

<svg>
    <defs>
        <linearGradient id="starFraction">
            <stop offset="50%" stop-color="currentColor"/>
            <stop offset="50%" stop-color="transparent"/>
        </linearGradient>
    </defs>
    <svg fill="url('#starFraction')" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.5 0l1.771 4.617L13 4.966l-3.625 3.2L10.521 13 6.5 10.363 2.479 13l1.146-4.833L0 4.966l4.729-.349z"/>
    </svg>
    <svg fill="none" version="1.1" viewBox="0 0 13.01 13.08" xmlns="http://www.w3.org/2000/svg">
        <path d="m6.507 1.452c0.4691 1.226 0.9381 2.453 1.407 3.679 1.279 0.09504 2.559 0.1901 3.838 0.2851-0.9827 0.8724-1.965 1.745-2.948 2.617 0.3054 1.297 0.6107 2.593 0.916 3.89-1.071-0.7072-2.142-1.414-3.213-2.122-1.071 0.7072-2.142 1.414-3.213 2.122 0.3053-1.297 0.6107-2.593 0.916-3.89-0.9827-0.8724-1.965-1.745-2.948-2.617 1.279-0.09505 2.559-0.1901 3.838-0.2851 0.4691-1.226 0.9382-2.453 1.407-3.679z" stroke="currentColor" stroke-width="1.038"/>
    </svg>
</svg>

As you can see i can overlap different svgs with linear gradient to end up with partial result.

While it may be a little difficult to achieve the desired result for more complicated clipping shapes it should still be possible to achieve if you duplicate the object and apply different gradient to each copy.

Upvotes: 0

Jay
Jay

Reputation: 1271

In addition to @atomictom's answer I have found that if you change the div's class to an id then you won't have to inline the CSS

body{ 
  background: lightgreen;
}
#clip-this {
  background:red; 
  height: 200px; 
  width: 200px;
  clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: url("#swipe__clip-path");

}
 <div id="clip-this"></div>
    
    <!-- this lets Firefox display the angle -->
    <svg class="clip-svg">
    	<defs>
    		<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
    			<polygon points="0.404 0, 1 0, 1 1, 0 1" />
    		</clipPath>
    	</defs>	
    </svg>

Upvotes: 0

Cyril Mestrom
Cyril Mestrom

Reputation: 6212

You can use an inline SVG (as the code below shows) in Firefox, where your points are the percentage / 100. Because of the attribute clipPathUnits the mask will be responsive.

<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0.58 0, 0.39 0.818, 0 0.818" />
    </clipPath>
  </defs>
</svg>

Refer to the svg like 

.mask-1 {
   -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   -webkit-clip-path: url("#clip-shape"); 
   clip-path: url("#clip-shape");
}

I struggled extensively with this, since my svg was dynamically added to the page. Applying the clip-path css-property with a delay (or pageload) via js solved my problems in FF.

There is no support in IE by my knowledge.

Upvotes: 14

atomictom
atomictom

Reputation: 1807

I've also struggled a lot with this. I'm covering similar ground as the above answer, but a solution I found was to add the CSS inline using a Style tag. It's ugly, but works at least.

<div class="clip-this" style="background:red; height: 200px; width: 200px;"></div>

<!-- this lets Firefox display the angle -->
<svg class="clip-svg">
	<defs>
		<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
			<polygon points="0.404 0, 1 0, 1 1, 0 1" />
		</clipPath>
	</defs>	
</svg>

<style>
  .clip-this {
	clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%);
	clip-path: url("#swipe__clip-path");

}
</style>

Upvotes: 5

Related Questions