Question

我遇到IE和Mozilla的此css属性我打算掩盖一个HTML元素，但我似乎无法工作。我需要你的帮助，这是我的代码

.download {
mask: url(image/download.svg#Capa_1);
-webkit-mask: url("image/download.svg") top left / cover;}

这是我的svg文件

  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <path d="M256,288l128-128h-96V32h-64v128h-96L256,288z M372.363,235.636l-35.87,35.871L466.533,320L256,398.509L45.467,320
        l130.04-48.493l-35.871-35.871L0,288v128l256,96l256-96V288L372.363,235.636z"/>
    </svg>

Answer 1

使用SVG作为内容和掩码。例如：

＆＃13;

<svg>
<defs>
  <mask id="mask1" x="0" y="0" width="1000" height="1000" >
    <rect x="0" y="0" width="1000" height="1000"
        style="stroke:none; fill: #999999"/>
  </mask>
</defs>


<rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #000000; mask: url(#mask1)"/>
</svg>

＆＃13;

<强>参考

SVG Masks

如何在IE和Mozilla中使用CSS Mask

1 个答案: