Reputation: 199
I have successfully been using clip-path in SVGs based on style name in other browsers but when the 'clip-path' CSS property is used in Firefox from an external stylesheet it has no effect.
Example of it working in a jsfiddle
The below does not work on Firefox, but if you put the same css between <style>
tags in the header, it will!
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class='svgWrapper' style='float:left; border:1px solid black; line-height:0px;'>
<svg width="200" height="200" viewPort="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="100" cy="100" r="100"/>
</clipPath>
</defs>
<rect class="foo" fill="DeepSkyBlue" x="0" y="0" width="200" height="200" />
</svg>
</div>
</body>
</html>
where 'style.css' contains
.foo{
clip-path: url(#myClip);
}
This is part of a large project with existing infrastructure and I cannot simply style inline or have my stylesheet internally but I need this to work in Firefox. Any help would be appreciated.
Upvotes: 2
Views: 414