Question

我正在尝试使用以下方法在图像上添加SVG蒙版：

.image {
  -webkit-mask-box-image: url('mask.svg');
  mask-border: url('mask.svg');
  clip-path: url(mask.svg);
}

和实际的mask / svg文件类似：

<?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"
     viewBox="0 0 320 300" style="enable-background:new 0 0 320 300;" xml:space="preserve">
<style type="text/css">
    .st0{clip-path:url(#XMLID_5_);fill:#E1173D;}
</style>
<g id="XMLID_2_">
    <defs>
        <rect id="XMLID_3_" x="0.7" width="319.3" height="300"/>
    </defs>
    <clipPath id="XMLID_5_">
        <use xlink:href="#XMLID_3_"  style="overflow:visible;"/>
    </clipPath>
    <path id="XMLID_4_" class="st0" d="M320,149.1C320,61.3,252.5,0,158.1,0H37.6v247.9L1.2,296.5c-0.3,0.4-0.4,0.8-0.4,1.3
        c0,1.2,1,2.2,2.2,2.2h155.2C252.5,300,320,238.2,320,149.1"/>
</g>
</svg>

现在，在Chrome上查看时效果很好，但Firefox上没有显示任何内容（更不用说IE）了。

我做错了什么，任何帮助都会很棒？

Answer 1

url必须通过将其id作为片段标识符直接引用<clipPath>元素。

SVG掩码无法在Firefox中运行

1 个答案: