SVG clip-path прозрачный текст

by Олег

HTML

<div class="wrap">
<svg>
  <defs>
      <clipPath id="clipPath2">
        <text x="50px" y="100px" style="font-size: 5em; font-weight: 800; "fill="white">COOL TEXT</text>
      </clipPath>
    </defs>
    <rect x="10" y="10" width="100%" height="100%"  clip-path="url(#clipPath2) " fill="#623ea8"/>
  
</svg>
</div>












































<div class="footer">
Помогу в решении любого вопроса js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку<br>Аккаунт на тостере <a href="https://toster.ru/user/politon">toster.ru/user/politon</a><br><span>E-mail: oleg@w3schools.ru</span><br><span>Skype: politon81</span>
</div>
<!--Любое решение вопросов
E-mail: oleg@w3schools.ru
js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку
E-mail: oleg@w3schools.ru
Skype: politon81
-->

CSS

body{
  background: url(http://www.title-ed.com/FloridaTitle/wp-content/uploads/2013/07/skyline.png);
  background-repeat:no-repeat;
  background-size:100%;
}
.wrap{
  margin:40px auto;
  max-width:600px;
  height:100%;
  position:relative;
}
svg{
  position:absolute;
  background:#fff;
  width:100%;
  opacity:0.5;
  size:100%;
  }




































/*Это не относится к Вашему коду*/
.footer{
  position:fixed;
  bottom:20px;
  right:20px;
  font-size:0.7em;
  background:#ff0;
}
.footer span{
  color:#f00;
  font-weight:bold;
}