How to hide svg element - html

Question

I have a problem with hiding svg element. Maybe display: none or visibility? I tried but it hasn't any results. As here (IMAGE). Please help.
This is my site with example text "KAWAŁY":
#kawaly-div {
text-align: center;
background: #fda9a9;
}
.link {
text-decoration: none;
position: relative;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
.link--kawaly {
font-family: 'Oswald', sans-serif;
font-size: 10em;
color: #e78383;
-webkit-transition: color 0s 0.5s;
transition: color 0s 0.5s;
}
.link--kawaly:hover {
color: transparent;
-webkit-transition: none;
transition: none;
}
.link--kawaly::before,
.link--kawaly::after {
content: attr(data-letters);
position: absolute;
top: 0;
left: 0;
color: #e78383;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--kawaly::before {
-webkit-clip-path: url(#cp_up);
clip-path: url(../index.html#cp_up);
}
.link--kawaly::after {
-webkit-clip-path: url(#cp_down);
clip-path: url(../index.html#cp_down);
}
.link--kawaly:hover::before,
.link--kawaly:hover::after {
color: #fff;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--kawaly:hover::before {
-webkit-transform: translate3d(20px, 1px, 0);
transform: translate3d(20px, 1px, 0);
}
.link--kawaly:hover::after {
-webkit-transform: translate3d(-10px, -1px, 0);
transform: translate3d(-10px, -1px, 0);
}
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700' rel='stylesheet' type='text/css'>
<div id="kawaly-div">
<svg class="kawaly-tekst">
<clippath id="cp_up">
<polygon id="cp_poly_up" points="0,0 550,0 550,160" />
</clippath>
<clippath id="cp_down">
<polygon id="cp_poly_down" points="0,0 550,160 0,160" />
</clippath>
</svg>
<div class=" color-5">
<a class="link link--kawaly" href="#" data-letters="KAWAŁY">KAWAŁY</a>
</div>
</div>
Thanks in advience!

Answer 1

The most-often recommended way is:
<svg class="kawaly-tekst" width="0" height="0">