SVG遮罩元素

即时遮罩svg，因此它具有背景颜色，只是标识被遮盖。我想用它作为全宽菜单背景。这里是我复制了主意笔： http://codepen.io/maddesigns/pen/PwqYON SVG遮罩元素

在笔，他只使用文字，但我想用一个SVG图像从来就在Illustrator中之前完成。

希望有人能帮助我。

这是代码：

svg { 
 
    width: 100%; 
 
    height: inherit; 
 
} 
 
svg text { 
 
    text-anchor: middle; 
 
} 
 
svg #alpha { 
 
    fill: gray; 
 
} 
 
svg #text { 
 
    letter-spacing: -4px; 
 
    font-size: 8em; 
 
    font-weight: 800; 
 
} 
 
svg #subtitle { 
 
    letter-spacing: 4px; 
 
    word-spacing: 0.25em; 
 
    font-size: 1.5em; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
} 
 
svg #base { 
 
    fill: black; 
 
    -webkit-mask: url(#mask); 
 
      mask: url(#mask); 
 
}

<svg aria-labelledby="text"> 
 
     <defs> 
 
     <mask id="mask" x="0" y="0" width="100%" height="100%" > 
 
      <rect id="alpha" x="0" y="0" width="100%" height="100%" /> 
 
<path class="text" x="0" y="0" d="M-152.2,402.7c1.5-0.3,3.5-0.5,6-0.5c3.1,0,5.4,0.7,6.8,2c1.3,1.2,2.1,2.9,2.1,5.1s-0.6,3.9-1.9,5.2 
 
\t c-1.7,1.8-4.4,2.7-7.4,2.7c-0.9,0-1.8,0-2.5-0.2v9.7h-3.1L-152.2,402.7L-152.2,402.7z M-149.1,414.4c0.7,0.2,1.5,0.3,2.6,0.3 
 
\t c3.8,0,6.1-1.8,6.1-5.2c0-3.2-2.3-4.8-5.7-4.8c-1.4,0-2.4,0.1-3,0.3C-149.1,404.9-149.1,414.4-149.1,414.4z"/> 
 
<path class="text" d="M-133,402.7c1.6-0.3,3.9-0.5,6-0.5c3.3,0,5.5,0.6,7,2c1.2,1.1,1.9,2.7,1.9,4.6c0,3.2-2,5.3-4.6,6.2v0.1 
 
\t c1.9,0.6,3,2.4,3.6,4.9c0.8,3.4,1.4,5.7,1.9,6.7h-3.2c-0.4-0.7-0.9-2.8-1.6-5.8c-0.7-3.3-2-4.6-4.9-4.7h-3v10.5h-3.1V402.7 
 
\t L-133,402.7z M-129.9,413.7h3.2c3.3,0,5.5-1.8,5.5-4.6c0-3.1-2.3-4.5-5.6-4.5c-1.5,0-2.6,0.1-3.1,0.3L-129.9,413.7L-129.9,413.7z"/> 
 
<path class="text" d="M-92.8,414.2c0,8.4-5.1,12.8-11.3,12.8c-6.4,0-10.9-5-10.9-12.3c0-7.7,4.8-12.7,11.3-12.7C-97.1,402-92.8,407-92.8,414.2z 
 
\t M-111.7,414.6c0,5.2,2.8,9.8,7.7,9.8c5,0,7.8-4.6,7.8-10.1c0-4.8-2.5-9.9-7.7-9.9C-109.1,404.5-111.7,409.3-111.7,414.6z"/> 
 
<path class="text" d="M-1.3,405.1L-1.3,405.1c-0.4,1.4-0.8,2.9-1.3,4.4l-2.4,7h7.3l-2.4-7C-0.6,408-0.9,406.5-1.3,405.1z"/> 
 
<path class="text" d="M-90.7,400.8V428H9.9v-27.2H-90.7z M-67.7,426.6l-0.6-10.7c-0.2-3.4-0.4-7.5-0.4-10.5h-0.1c-0.8,2.8-1.8,5.9-3.1,9.2 
 
\t l-4.3,11.8h-2.4l-3.9-11.6c-1.2-3.4-2.1-6.6-2.8-9.4h-0.1c-0.1,3-0.3,7.1-0.5,10.7l-0.6,10.4h-3l1.7-24.3h4l4.1,11.7 
 
\t c1,3,1.8,5.7,2.4,8.2h0.1c0.6-2.4,1.5-5.1,2.6-8.2l4.3-11.7h4l1.5,24.3C-64.6,426.6-67.7,426.6-67.7,426.6z M-46.2,426.6h-13.6 
 
\t v-24.3h13.1v2.6h-10v7.7h9.4v2.6h-9.4v8.7h10.5V426.6z M-25.7,423.3c-2.3,2.3-6,3.5-10.7,3.5c-2.2,0-4.1-0.1-5.7-0.3v-23.9 
 
\t c1.9-0.3,4.2-0.5,6.7-0.5c4.5,0,7.7,1,9.8,3c2.2,2,3.4,4.8,3.4,8.7C-22.2,417.9-23.4,421.1-25.7,423.3z M-15,426.6h-3.1v-24.3h3.1 
 
\t V426.6z M5.6,426.6L3,419h-8.6l-2.5,7.6h-3.2l8.2-24.3h3.8L9,426.6H5.6z"/> 
 
<path class="text" d="M-35.3,404.7c-1.6,0-2.8,0.1-3.7,0.3v19.1c0.8,0.1,1.9,0.2,3.2,0.2c6.7,0,10.3-3.7,10.3-10.3 
 
\t C-25.4,408.3-28.7,404.7-35.3,404.7z"/> 
 
<path class="text" d="M31,425.5c-1.4,0.5-4.2,1.3-7.5,1.3c-3.7,0-6.7-0.9-9.1-3.2c-2.1-2-3.4-5.3-3.4-9c0-7.2,5-12.5,13.1-12.5c2.8,0,5,0.6,6,1.1 
 
\t l-0.8,2.6c-1.3-0.6-2.9-1-5.4-1c-5.9,0-9.8,3.7-9.8,9.8c0,6.2,3.7,9.8,9.4,9.8c2.1,0,3.5-0.3,4.2-0.6v-7.2h-4.9v-2.5h8v11.4H31z"/> 
 
<path class="text" d="M35.8,402.7c1.6-0.3,3.9-0.5,6-0.5c3.3,0,5.5,0.6,7,2c1.2,1.1,1.9,2.7,1.9,4.6c0,3.2-2,5.3-4.6,6.2v0.1 
 
\t c1.9,0.6,3,2.4,3.6,4.9c0.8,3.4,1.4,5.7,1.9,6.7h-3.2c-0.4-0.7-0.9-2.8-1.6-5.8c-0.7-3.3-2-4.6-4.9-4.7h-3v10.5h-3.1V402.7 
 
\t L35.8,402.7z M38.9,413.7h3.2c3.3,0,5.5-1.8,5.5-4.6c0-3.1-2.3-4.5-5.6-4.5c-1.5,0-2.6,0.1-3.1,0.3 
 
\t C38.9,404.9,38.9,413.7,38.9,413.7z"/> 
 
<path class="text" d="M76,414.2c0,8.4-5.1,12.8-11.3,12.8c-6.4,0-10.9-5-10.9-12.3c0-7.7,4.8-12.7,11.3-12.7C71.7,402,76,407,76,414.2z 
 
\t M57.1,414.6c0,5.2,2.8,9.8,7.7,9.8c5,0,7.8-4.6,7.8-10.1c0-4.8-2.5-9.9-7.7-9.9C59.7,404.5,57.1,409.3,57.1,414.6z"/> 
 
<path class="text" d="M83.2,402.4v14.4c0,5.4,2.4,7.7,5.6,7.7c3.6,0,5.9-2.4,5.9-7.7v-14.4h3.2v14.1c0,7.5-3.9,10.5-9.2,10.5 
 
\t c-5,0-8.7-2.8-8.7-10.4v-14.3L83.2,402.4L83.2,402.4z"/> 
 
<path class="text" d="M103.3,402.7c1.5-0.3,3.5-0.5,6-0.5c3.1,0,5.4,0.7,6.8,2c1.3,1.2,2.1,2.9,2.1,5.1s-0.6,3.9-1.9,5.2 
 
\t c-1.7,1.8-4.4,2.7-7.4,2.7c-0.9,0-1.8,0-2.5-0.2v9.7h-3.1V402.7L103.3,402.7z M106.5,414.4c0.7,0.2,1.5,0.3,2.6,0.3 
 
\t c3.8,0,6.1-1.8,6.1-5.2c0-3.2-2.3-4.8-5.7-4.8c-1.4,0-2.4,0.1-3,0.3V414.4L106.5,414.4z"/> 
 
<path class="text" d="M119.5,421.1c2,0,3.5,1.6,3.5,3.5c0,2-1.6,3.5-3.6,3.5s-3.6-1.5-3.6-3.5C115.9,422.6,117.5,421.1,119.5,421.1L119.5,421.1z 
 
\t M119.4,421.8c-1.5,0-2.7,1.3-2.7,2.8c0,1.6,1.1,2.8,2.7,2.8c1.5,0,2.7-1.2,2.7-2.8C122.1,423.1,121,421.8,119.4,421.8 
 
\t C119.5,421.8,119.4,421.8,119.4,421.8z M118.9,426.4h-0.8v-3.5c0.3-0.1,0.8-0.1,1.3-0.1c0.7,0,1,0.1,1.2,0.3 
 
\t c0.2,0.1,0.3,0.4,0.3,0.7c0,0.4-0.3,0.7-0.7,0.8l0,0c0.3,0.1,0.5,0.4,0.6,0.9s0.2,0.7,0.3,0.9h-0.9c-0.1-0.1-0.2-0.4-0.3-0.8 
 
\t c-0.1-0.4-0.3-0.6-0.7-0.6h-0.4L118.9,426.4L118.9,426.4z M118.9,424.4h0.4c0.4,0,0.8-0.1,0.8-0.5c0-0.3-0.2-0.5-0.7-0.5 
 
\t c-0.2,0-0.4,0-0.4,0v1H118.9z"/> 
 
     </mask> 
 
     </defs> 
 

 
     <rect id="base" x="0" y="0" width="100%" height="100%"/> 
 
    </svg>

来源

2015-10-20 muuvmuuv

原文为SVG的<path>元件从<text> 不同地定位，使其更容易对准由transform添加<g>组标签，并将其放置属性。这样的：

<mask id="mask" x="0" y="0" width="100%" height="100%"> 
    <rect id="alpha" x="0" y="0" width="100%" height="100%" /> 
    <g transform="translate(400,-300)"> 
     //your <path> inside 
    </g> 
</mask>

这里是一个固定fiddle

来源

2015-10-20 11:45:20

尼斯感谢您！我之前将它们分组，但是认为它会自动对路径元素进行自动调整。 – muuvmuuv

谢谢。我认为这是一种解决方法，因为这对我来说似乎不自然。我对svg的自己也不太好。我认为应该有更好的方法来定位''元素。我建议你开始挖掘定义位置的路径的M和m属性。 –

SVG遮罩元素

回答

相关问题