被屏蔽的SVG元素不在第二行显示

Question

我使用SVG蒙版从白色矩形中剪出文本并揭示其背后的背景。当文本在一行时，一切正常。在移动设备上，我想包装文本并左对齐，所以我将文本分成两个元素（但仍然是一个SVG）。

问题出现时：SVG的第二行不显示。使用Chrome浏览器时，该元素的位置应该恰好位于应该显示的位置，但不可见。所有其他浏览器也是如此（尚未检查Internet Explorer）。

它应该看起来像这样（注意第二行）：screenshot of the intended design。

我检查了错别字，试着省略了SVG的第一行（“Made by”部分）并广泛搜索了一下 - 没有任何工作。大多数关于SVGs的问题都没有提及动态创建的问题，在这种情况下不适用。这似乎是一个非常具体的错误（很可能是我的错误）。

请看看它，看看你是否能找到错误。谢谢！！

这里有一个codepen：https://codepen.io/connor_baer/pen/yJONxN和下面的代码（调整视口以查看手机版）：

.header { 
 
    background-color: blue; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background: url('https://images.unsplash.com/photo-1465152251391-e94453ee3f5a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f3699fc4dbc682fbecdc4fa4d5f6cad') 50% 50%/cover; 
 
} 
 

 
.header-large { 
 
    display: none; 
 
} 
 

 
.header-small { 
 
    display: none; 
 
} 
 

 
.header-text { 
 
    font-size: 3.5rem; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
} 
 

 
@media (max-width: 36em) { 
 
    .header-small { 
 
    display: block; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    } 
 
} 
 

 
@media (min-width: 36em) { 
 
    .header-large { 
 
    display: block; 
 
    width: 32rem; 
 
    max-width: 80%; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    } 
 
}

<header> 
 
    <div class="header"> 
 
    <svg class="header-large" viewbox="0 0 450 75"> 
 
     <defs> 
 
     <g id="text-large"> 
 
      <text class="header-text" text-anchor="middle" x="225" y="53">Made by Connor.</text> 
 
     </g> 
 
     <mask id="mask-large" x="0" y="0" width="450" height="75"> 
 
      <rect x="0" y="0" width="450" height="75" fill="#fff"/> 
 
      <use xlink:href="#text-large" /> 
 
     </mask> 
 
     </defs> 
 
     <rect x="0" y="0" width="450" height="75" mask="url(#mask-large)" fill="white" fill-opacity="1"/> 
 
     <use xlink:href="#text-large" mask="url(#mask-large)" /> 
 
    </svg> 
 
    <svg class="header-small" viewbox="0 0 240 150"> 
 
     <defs> 
 
     <g id="text-top"> 
 
      <text class="header-text" x="15" y="53">Made by</text> 
 
     </g> 
 
     <mask id="mask-top" x="0" y="0" width="240" height="75"> 
 
      <rect x="0" y="0" width="240" height="75" fill="#fff"/> 
 
      <use xlink:href="#text-top" /> 
 
     </mask> 
 
     <g id="text-bottom"> 
 
      <text class="header-text" x="15" y="128">Connor.</text> 
 
     </g> 
 
     <mask id="mask-bottom" x="0" y="75" width="210" height="75"> 
 
      <rect x="0" y="75" width="210" height="75" fill="#fff"/> 
 
      <use xlink:href="#text-bottom" /> 
 
     </mask> 
 
     </defs> 
 
     <rect x="0" y="0" width="240" height="75" mask="url(#mask-top)" fill="white" fill-opacity="1"/> 
 
     <use xlink:href="#text-top" mask="url(#mask-top)" /> 
 
     <rect x="0" y="75" width="210" height="75" mask="url(#mask-bottom)" fill="white" fill-opacity="1"/> 
 
     <use xlink:href="#text-bottom" mask="url(#mask-bottom)" /> 
 
    </svg> 
 
    </div> 
 
</header>

Answer 1

你的主要问题是，你的mask units显然是用户空间单位，但默认是objectBoundingBox。我已经解决了下面的问题。使用您编写的标记，遮罩从屏幕底部开始，即75 x形状的高度。

另外SVG是区分大小写的，所以你需要viewBox而不是viewbox。

.header { 
 
    background-color: blue; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background: url('https://images.unsplash.com/photo-1465152251391-e94453ee3f5a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f3699fc4dbc682fbecdc4fa4d5f6cad') 50% 50%/cover; 
 
} 
 

 
.header-large { 
 
    display: none; 
 
} 
 

 
.header-small { 
 
    display: none; 
 
} 
 

 
.header-text { 
 
    font-size: 3.5rem; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
} 
 

 
@media (max-width: 36em) { 
 
    .header-small { 
 
    display: block; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    } 
 
} 
 

 
@media (min-width: 36em) { 
 
    .header-large { 
 
    display: block; 
 
    width: 32rem; 
 
    max-width: 80%; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    } 
 
}

<header> 
 
    <div class="header"> 
 
    <svg class="header-large" viewBox="0 0 450 75"> 
 
     <defs> 
 
     <g id="text-large"> 
 
      <text class="header-text" text-anchor="middle" x="225" y="53">Made by Connor.</text> 
 
     </g> 
 
     <mask id="mask-large" x="0" y="0" width="450" height="75"> 
 
      <rect x="0" y="0" width="450" height="75" fill="#fff"/> 
 
      <use xlink:href="#text-large" /> 
 
     </mask> 
 
     </defs> 
 
     <rect x="0" y="0" width="450" height="75" mask="url(#mask-large)" fill="white" fill-opacity="1"/> 
 
     <use xlink:href="#text-large" mask="url(#mask-large)" /> 
 
    </svg> 
 
    <svg class="header-small" viewBox="0 0 240 150"> 
 
     <defs> 
 
     <g id="text-top"> 
 
      <text class="header-text" x="15" y="53">Made by</text> 
 
     </g> 
 
     <mask id="mask-top" x="0" y="0" width="240" height="75" maskUnits="userSpaceOnUse"> 
 
      <rect x="0" y="0" width="240" height="75" fill="#fff"/> 
 
      <use xlink:href="#text-top" /> 
 
     </mask> 
 
     <g id="text-bottom"> 
 
      <text class="header-text" x="15" y="128">Connor.</text> 
 
     </g> 
 
     <mask id="mask-bottom" x="0" y="75" width="210" height="75" maskUnits="userSpaceOnUse"> 
 
      <rect x="0" y="75" width="210" height="75" fill="#fff"/> 
 
      <use xlink:href="#text-bottom" /> 
 
     </mask> 
 
     </defs> 
 
     <rect x="0" y="0" width="240" height="75" mask="url(#mask-top)" fill="white" fill-opacity="1"/> 
 
     <use xlink:href="#text-top" mask="url(#mask-top)" /> 
 
     <rect x="0" y="75" width="210" height="75" mask="url(#mask-bottom)" fill="white" fill-opacity="1"/> 
 
     <use xlink:href="#text-bottom" mask="url(#mask-bottom)" /> 
 
    </svg> 
 
    </div> 
 
</header>