CODEWITHSUNDEEP
cssfirefoxsvgclip
Pooshonk
Pooshonk

Reputation: 1324

CSS/SVG clip path not working in Firefox

I am trying to use an svg as a background image using clip path, so I can change the background colour dynamically.

This is a checkbox, where the tick would be the svg.

I was using the css mask attribute using a base64 image, but this wasn't cross browser compatible. This doesn't seem to working in Firefox

I have the following codepen which shows my code. I will explain below.

SVG:

<svg version="1.1" height="0px" width="0px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
     <clipPath id="checkBox">
          <path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z" />
     </clipPath>
</svg>

CSS:

div.svgCheckDiv {
    clip-path: url('#checkBox');
}

This works fine in codepen, but this doesn't seem to work in my application. The screenshot below shows that the image cannot be found. In my HTML I have added the svg into the body inside a hidden div.

enter image description here

Can anyone provide some assistance as to why this isn't loading?

I can provide more code examples and information if needed. Thanks.

EDIT - FULL HTML

<html>
<head>
    <style>
        div.svgCheckDiv {
            -webkit-mask: url('#checkBox');
            mask: url('#checkBox');
            clip-path: url('#checkBox');
        }
    </style>
</head>
<body class="tileset vertical">
    <div class="svg_holder">
    <svg version="1.1" height="20px" width="20px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
     <clipPath id="checkBox">
          <path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z" />
     </clipPath>
    </svg>
    </div>
   <table style="width: 100%; border:none;" align="left">
   <tbody>
    <tr>
        <td class="checkbox_td" style="padding: 2px 0px 6px 0px;width:27px;">
            <input class="canvas-checkbox-selected" name="Checkbox Group" style="box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-moz-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-webkit-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);border:2px solid #809191;background: #52acaf;float: left; width: 27px; height: 27px" type="checkbox">
            <div class="svgCheckDiv" style="background:#ff0000;height:27px;width:27px;"></div>
        </td>
        <td class="checkbox_label" style="padding: 2px 8px 6px 6px; height: 18px; line-height: 18px; font-size: 18px; text-decoration: none;">Item One</td>
    </tr>
    <tr>
        <td class="checkbox_td" style="padding: 2px 0px 6px 0px;width:27px;">
            <input class="canvas-checkbox" name="Checkbox Group" style="box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-moz-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-webkit-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);border:2px solid #809191;background: #FFFFFF;float: left; width: 27px; height: 27px" type="checkbox">
            <div class="svgCheckDiv-hidden" style="background:#ff0000;height:27px;width:27px;"></div>
        </td>
        <td class="checkbox_label" style="padding: 2px 8px 6px 6px; height: 18px; line-height: 18px; font-size: 18px; text-decoration: none;">uhjgjghj</td>
    </tr>
</tbody>
</table>
</body>
</html>

Upvotes: 4

Views: 2181

Answers (4)

Robert Longson
Robert Longson

Reputation: 124249

Currently a URL that starts with # points into the same file. I.e. if you write #xxx in a CSS file you'd need to have an element with an id of xxx in that CSS file itself.

The relevant specifications have changed recently and I think Firefox will change at some point to assume that #xxx would refer to a resource in the parent document.

In the meantime you can either put the CSS in the file it references or prepend the file path to the #

Upvotes: 2

Raeesh Alam
Raeesh Alam

Reputation: 3490

I have little bit changes in your html and add some css property like prefix for cross browser compatibility. There is not any issue is FireFox its working fine so check this snippet into your browser.

    .table{
      border: none;
      border-collapse: collapse;
      width: 100%;
    }
    .table tr td label{
      display: block;
      height: 35px;
      line-height: 30px;
      border-bottom: 1px solid #ddd;
    }
    .table tr td label:hover{
      background: #f9f9f9;
      cursor: pointer;
    }
    .canvas-checkbox{
      position: absolute;
      opacity: 0;
    }
    div.svgCheckDiv { 
      background:#ff0000;
      height:27px;
      width:27px;
      display: none;
      /*call svg by id*/      
      -webkit-clip-path: url('#checkBox'); /*For Chrome and Safari*/ 
      -moz-clip-path: url('#checkBox'); /*for Firefox*/
      -ms-clip-path: url('#checkBox'); /*for IE*/
      -o-clip-path: url('#checkBox'); /*for Opera*/
      clip-path: url('#checkBox'); 
    }
    .canvas-checkbox:checked ~  div.svgCheckDiv{
      display: block;
    }
<table class="table">
  <tbody>
    <tr>
      <td width="27">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <input class="canvas-checkbox" name="Checkbox Group" type="checkbox" id="check1" checked>
        <div class="svgCheckDiv"></div>
      </td>
      <td><label for="check1">Item 1</label></td>
    </tr>
    <tr>
      <td>
        <input class="canvas-checkbox" name="Checkbox Group" type="checkbox" id="check2">
        <div class="svgCheckDiv"></div>
      </td>
      <td><label for="check2">Item 2</label></td>
    </tr>
    <tr>
      <td>
        <input class="canvas-checkbox" name="Checkbox Group" type="checkbox" id="check3">
        <div class="svgCheckDiv"></div>
      </td>
      <td><label for="check3">Item 3</label></td>
    </tr>
  </tbody>
</table>

<div class="svg_holder">
  <svg version="1.1" height="20px" width="20px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
    <clipPath id="checkBox">
      <path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951 c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445 c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z" />
    </clipPath>
  </svg>
</div>

Upvotes: -1

Jin
Jin

Reputation: 144

You can try entering the url about:config in firefox and set the key layout.css.clip-path-shapes.enabled to true. That may solve your issue.

Upvotes: 1

Raeesh Alam
Raeesh Alam

Reputation: 3490

Don't put svg in display:none div. Because of then svg property will not execute.

<div style="display: none;">
    <!-- SVG will not work in this div-->
</div>

<div style="visibility: hidden;">
    <!-- SVG will work on this div -->
</div>


div.svgCheckDiv {
  clip-path: url('#checkBox');
}
<div class="svgCheckDiv" style="height: 20px;width: 20px;background: red;"></div>

<svg version="1.1" height="0px" width="0px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
  <clipPath id="checkBox">
<path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
	c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
	c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z"/>
    </clipPath>
</svg>

I think you are missing this part in svg. Please put in your svg. After that this will work.

<clipPath id="checkBox">
    <path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
        c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
        c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z"/>
     </clipPath>

Upvotes: -1

Related Questions