如何隐藏svg元素

我隐藏svg元素有问题。也许显示：无或知名度？我尝试过，但没有任何结果。由于here (IMAGE)。请帮忙。如何隐藏svg元素

这是我的网站与示例文本 “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>

感谢advience！

来源

2016-03-05 Michal

http://stackoverflow.com/questions/24578837/remove-or-hide-svg-element –

svg.kawaly-tekst {显示：无; }作品完美无缺 – reinder

但动画无法正常工作;） – Michal

的最常推荐的方法是：

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

来源

2016-03-05 05:09:39

如何隐藏svg元素

回答

相关问题