マスクされたSVG要素が2行目に表示されない

Question

SVGマスクを使用して、白い矩形からテキストを切り出し、背景の背景を表示します。テキストが1行にあるとき、すべてが完全に機能します。モバイルでは、テキストを折り返して配置したいので、テキストを2つの要素に分割します（ただし1つのSVGはまだ1つです）。

これは問題が発生したときです.SVGの2行目は表示されません。 Chromeでそれを調べると、その要素は想定されている場所に正確に配置されますが、表示されません。他のすべてのブラウザでも同じことが言えます（まだInternet Explorerをチェックしていません）。

これは次のようになっています（2行目に注意してください）：screenshot of the intended design。

私はタイプミスをチェックし、SVGの最初の行（ "Made by"部分）を省略して、広範囲にグーグルで検索しました。何も機能しませんでした。表示されないSVGに関するほとんどの質問は、動的に作成されたSVGを参照していますが、この場合は適用されません。これは非常に具体的なエラー（おそらく私の部分でそうです）と思われます。

間違いを見つけられるかどうか確認してください。ありがとう!!

はここ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倍から始まります。

また、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>