CODEWITHSUNDEEP
htmlcsssvgpolygondisplay
Michal
Michal

Reputation: 61

How to hide svg element

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!

Upvotes: 1

Views: 2352

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The most-often recommended way is:

<svg class="kawaly-tekst" width="0" height="0">

Upvotes: 2

Related Questions