被屏蔽的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>