Svg <Mask> Tag Required for Firefox But Appears to Break CSS Mask in Chrome

SVG mask tag required for Firefox but appears to break CSS mask in Chrome

As linked in my comment above, the solution is to use separate paths for each browser in the .svg file:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1170px" height="494px" viewBox="0 0 1170 494" enable-background="new 0 0 1170 494" xml:space="preserve">

  <!-- Webkit -->
  <path fill="white" d="M1170.001,494V0h-352v141.605c0,2.2-0.521,5.274-2.075,6.832l-21.725,21.393c-1.554,1.557-3.2,4.631-3.2,6.832v131.692
c0,2.2,2.021,5.274,3.575,6.832l20.975,21.393c1.554,1.557,2.45,4.631,2.45,6.831V494H1170.001z"/>

  <!-- Firefox -->
  <defs>
    <mask id="mask" maskUnits="userSpaceOnUse">
      <path fill="white" d="M1170.001,494V0h-352v141.605c0,2.2-0.521,5.274-2.075,6.832l-21.725,21.393c-1.554,1.557-3.2,4.631-3.2,6.832v131.692
c0,2.2,2.021,5.274,3.575,6.832l20.975,21.393c1.554,1.557,2.45,4.631,2.45,6.831V494H1170.001z"/>
    </mask>
  </defs>

</svg>

Why is this SVG mask animation choppy in Firefox but smooth in Chrome?

A different idea using CSS mask where you will not have the issue. I used the path your provided as mask. Simply make sure to set the correct value for the viewBox

.box {
  display:inline-flex;
  width:300px;
  background: rgb(180, 180, 180);
  border-radius:50%;
  position:relative;
  overflow:hidden;
}
.box:after {
  content:"";
  padding-top:100%;
}
.box:before {
  content:"";
  position:absolute;
  left:0%;
  width:200%;
  height:30%;
  bottom:-10%;
  background:rgb(196, 3, 3);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-500 0 1100 900"><path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/></svg>') top/100% auto;
          mask:url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-500 0 1200 900"><path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/></svg>') top/100% auto; 
   animation:raise 6s infinite ease-in-out alternate,waves .75s infinite linear;
}
@keyframes waves {
  to {
    transform: translateX(-50%);
  }
}
@keyframes raise {
  to {
    height:160%;
  }
}

<div class="box">
</div>
<div class="box" style="width:200px;">
</div>

How can I apply a mask from an inline SVG that will work in Chrome?

Here is an ugly js solution, which will

• grab the content of your <mask>,
• copy it in a new svg element _{(luckily chrome doesn't need width and height)},
• convert it to a data-URI and set to the webkit-image CSS rule so that it doesn't pollute other browsers.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');var mask = document.querySelector('mask');svg.innerHTML = mask.innerHTML;var str = new XMLSerializer().serializeToString(svg);str = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(str);var div = document.getElementById('mask-me');div.style.webkitMaskImage = 'url('+str+')';

#mask-me {  width: 200px;  height: 200px;  background-color: red;  mask: url(#m);}

<div id="mask-me">  <svg>    <defs>      <mask id="m">        <circle cx="100" cy="100" r="50" fill="white" />      </mask>    </defs>  </svg></div>

---

Related Topics