CODEWITHSUNDEEP
htmlcssfirefoxsvg
Forthright
Forthright

Reputation: 199

How to get externally linked SVG clippath working in Firefox

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

Answers (1)

L777
L777

Reputation: 8507

in style.css:

.foo {
  clip-path: url(pagename.html#myClip);
}

Upvotes: 2

Related Questions