使用SVG徽标作为掩码

我的练习基于以下公认的答案：

以下是我在JSFIDLE中的格式副本：

我的徽标的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中

背后的逻辑。

您的SVG没有任何问题。您将其放置在灰色背景上，因此被遮罩的位是灰色的

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

HTML

---

这不是我真正想要的。我试图让SVG穿透除背景图像之外的所有内容。因此，无论徽标放置在何处（可在JSFIDLE中拖动），您都可以看到灰色背景。因此，您正在寻找一种具有某种

x射线

属性的SVG，它可以从一个背景看到后面的另一个背景？恐怕没有这样的事。是的，这就是我害怕的原因。谢谢你的帮助！您的用例是什么？你可能无法获得你想要的确切效果，但可能有一个可行的替代方案。我希望通过徽标的负空间看到车身背景图像。不管徽标和车身背景之间有多少层（在本例中为灰色背景的div）。

<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>

.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%;
}