使用SVG徽标作为掩码

Question

我的工作基于Creating transparent text to show gradient color of underlying div

中接受的答案

这是我在jsfiddle的演绎：http://jsfiddle.net/skrln/zSjgL/

我的徽标的svg代码：

    <svg width="190" height="121">
        <mask id="cutouttext">
            <rect width="190" height="121" x="0" y="0" fill="white" />
                <path id="number-two" d="M75.3,56.1c7.3-3,14.2-12.5,14.2-24c0-17.7-15.1-32.1-36.8-32.1H0v121.5h52.4c30,0,43.4-16.5,43.4-36.8
    C95.8,72.3,87,59.8,75.3,56.1z M66.5,94.6h-49V79.7h0.1l27-22.1c3.5-2.8,5.3-6.1,5.3-9c0-4-3.2-7.6-8.4-7.6c-6.4,0-9.1,5.7-10.2,9
    l-14.6-3.9c2.9-10.8,11.8-19.1,25.2-19.1c14.4,0,24.5,9.4,24.5,21.5c0,12.4-9,18.1-17.1,23.8l-10.4,7.3h27.6V94.6z" />
                <polygon id="filler" points="190,33.9 190,0 101.6,0 101.6,121.5 190,121.5 190,87.6 141.4,87.6 141.4,74.7 177.1,74.7 177.1,46.6 
    141.4,46.6 141.4,33.9   " />
        </mask>
        <rect width="190" height="121" x="0" y="0" fill="white" mask="url(#cutouttext)" />
    </svg>

到目前为止的结果：

问题：

面具不按我想要的方式行事;我希望“B”和“E”的内部部分遮盖灰色的底层div，这样你就可以看到背景图像，如下图所示：

我很难知道徽标的哪个部分是哪个，哪个是。另外，我似乎无法弄清楚SVG中<mask>背后的逻辑。

Answer 1

您的SVG没有任何问题。您将它放在灰色背景上，因此被屏蔽的位是灰色的。

您要做的是从SVG图像下方删除灰色背景。可能有更简洁的方法，但一种方法是使用表格布局，在一个单元格中使用徽标，在另一个单元格中使用灰色背景。

<强> Here's a JSFiddle link

HTML

<div class="gray">
    <svg width="190" height="121">
        <mask id="cutouttext">
            <rect width="190" height="121" x="0" y="0" fill="white" />
            <path d="M75.3,56.1c7.3-3,14.2-12.5,14.2-24c0-17.7-15.1-32.1-36.8-32.1H0v121.5h52.4c30,0,43.4-16.5,43.4-36.8
    C95.8,72.3,87,59.8,75.3,56.1z M66.5,94.6h-49V79.7h0.1l27-22.1c3.5-2.8,5.3-6.1,5.3-9c0-4-3.2-7.6-8.4-7.6c-6.4,0-9.1,5.7-10.2,9
    l-14.6-3.9c2.9-10.8,11.8-19.1,25.2-19.1c14.4,0,24.5,9.4,24.5,21.5c0,12.4-9,18.1-17.1,23.8l-10.4,7.3h27.6V94.6z" />
            <polygon points="190,33.9 190,0 101.6,0 101.6,121.5 190,121.5 190,87.6 141.4,87.6 141.4,74.7 177.1,74.7 177.1,46.6 
    141.4,46.6 141.4,33.9   " />
        </mask>
        <rect width="190" height="121" x="0" y="0" fill="white" mask="url(#cutouttext)" />
    </svg>
    <div></div>
</div>

CSS

.body {
    background: #550000 url('http://sciencelakes.com/data_images/out/7/8788677-red-background-wallpaper.jpg');
    display: block;
    height: 500px;
    margin: 0;
}
.gray {
    display:table-row;
    width:100%;
    height:121px;
}
.gray div, .gray svg {
    display:table-cell;
}
.gray div {
    background:gray;
    width:100%;
}