SVG< mask>标签，但似乎打破了Chrome中的CSS掩码 [英] SVG <mask> tag required for Firefox but appears to break CSS mask in Chrome

问题描述

我尝试使用外部SVG图片来掩盖内容：

I'm trying to mask content with an external SVG image like so:

#homepage-banner .desktop-slider.masked {
  -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */
  mask: url(news-panel-mask.svg#mask); /* Firefox */
}

news-panel-mask.svg文件以下内容：

The news-panel-mask.svg file has the following contents:

<?xml version="1.0" encoding="utf-8"?>
<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">
  <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>

这适用于Firefox，但我需要删除< defs& 和< mask> 标签，以使其在Chrome上正常工作。有没有办法我可以解决这个问题，所以我可以为这两个浏览器使用相同的svg文件？

This works on Firefox, but I need to remove the <defs> and <mask> tags in the svg file to get it to work on Chrome. Is there a way i can fix this so I can use the same svg file for both browsers?

感谢您的帮助。

推荐答案

在我上面的注释中链接，解决方案是在.svg文件中为每个浏览器使用单独的路径：

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>

这篇关于SVG< mask>标签，但似乎打破了Chrome中的CSS掩码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！