使用SVG徽标作为遮罩 [英] Using SVG logo as mask

问题描述

我的锻炼基于以下可接受的答案:

I'm basing my exercise on the accepted answer in: Creating transparent text to show gradient color of underlying div

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

Here's my rendition in jsfiddle: http://jsfiddle.net/skrln/zSjgL/

我的徽标的svg代码:

The svg code of my logo:

    <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，以便您可以看到背景图像，如下图所示:

The mask isn't behaving the way I want to; I want the inner parts of the "B" and "E" to mask out the gray underlying div so you can see the background image like the image below:

我很难知道徽标的哪一部分是，哪一部分是.同样，我似乎也无法弄清楚SVG中<mask>背后的逻辑.

I'm having trouble knowing what part of the logo is the and which one is the . Also I can't seem to figure out the logic behind the <mask> in the SVG.

推荐答案

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

There's nothing wrong with your SVG. You placed it on a grey background, so the bits that are masked out are grey.

您要执行的操作是从SVG图像下方移除灰色背景.这样做可能有更整洁的方法，但是一种方法是使用表格布局，在一个单元格中使用徽标，在另一个单元格中使用灰色背景.

What you want to do is remove the grey background from below the SVG image. There may be neater ways of doing this, but one approach is to use a table layout with the logo in one cell and the grey background in another.

这是一个JSFiddle链接

Here's a JSFiddle link

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

这篇关于使用SVG徽标作为遮罩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！