RWD対応、任意のテキストをSVGで書いて背景を切り抜く

Result

RWD対応。SVGでテキストを書いて切り抜いてます。
※CSSというか、HTMLの処理がメインになってます。CSSはRWD対応部分がメイン

css

body {
    font-family:'Oswald';
    background: url('https://picsum.photos/2500/1800/?random') no-repeat center center fixed; 
    background-size: cover;
}

.wrapper {
   margin-top:50px;
}

.title { /*切り抜き対象部分*/
    font:700 52pt 'Oswald';
    padding:0;
    margin:0;
    max-width:500px;
    margin: 0 auto;
    letter-spacing:2px;
}

.knockout {
  width:500px;
  display:block;
  height:270px;
  overflow:hidden; 
}

.knockout {
  fill: rgba(255,255,255,1);
}

.content {/*切り抜かれる部分*/
  background-color:#fff;
  margin:0 auto;
  max-width:500px;
}

.innertext {
  padding:50px;
}
.responsivetablet, .responsivemobile {/*RWD用に要素を予め用意し、非表示にしておく*/
  display:none;
}

@media all and (max-width:768px) {/*RWD対応*/
  .responsivetablet {/*表示させる*/
      display:block;
   }
  
   .responsivedesktop {/*通常時表示してたものを非表示にする*/
      display:none;
   }
  
   .title {
      font-size:45px;
      max-width:80%;
   }
  
   .content {
      max-width:80%;
   }
  
   .knockout {
      height:200px;
   }
  
   .knockout, .wrapper {
      width:100%;
   }
}

@media all and (max-width:540px) {/*RWD対応その2*/
   .responsivetablet {/*同じ要領*/
      display:none;
   }
  
   .responsivemobile {
      display:block;
   }
   
  .title {
      font-size:30px;
      min-width:320px;
      max-width:80%;
  }
  
  .knockout {
      height:140px;
  }
  
 .content {
      min-width:320px;
      max-width:80%;
  }
}

html

<h1 class="title responsivedesktop"><!--他スマフォ用とタブレット用を用意する-->
                <span class="knockout">
                    <svg id="svgDesktop" class="knockout" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%" >
                        <mask id="text-clip1">
                            <rect id="bg1" width="100%" height="100%" fill="white" />
                            <text id="rectWrap1" y="100" width="100%" height="100%" fill="#000">
                                <tspan x="44" dy="0">かちびと.net</tspan>
                                <tspan x="44" dy="80">サンプルです</tspan>
                                <tspan x="44" dy="80">foo bar</tspan>
                            </text>
                        </mask>
                     <rect width="100%" height="100%" mask="url(#text-clip1)" />
                    </svg>
                </span>
            </h1>

via

multiline, responsive knockout svg text