SVG 遮罩在 Firefox 中不起作用答案

【问题标题】：SVG masking not working in FirefoxSVG 遮罩在 Firefox 中不起作用
【发布时间】：2016-12-03 20:10:41
【问题描述】：

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

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

实际的掩码/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）上没有任何显示。

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

【问题讨论】：

标签： firefox svg

【解决方案1】：

url 必须直接引用 <clipPath> 元素，方法是包含其 id 作为片段标识符。

【讨论】：