問題與svg上的CSS

-1

我有這個問題，目前我有一個非常好的svg搜索，問題是div類col-md-10是奇怪的。 IT只有1px的px高度。（即使SVG較大，繼承人的形象，你可以看到（我已經做了一個檢查元素，你可以看到COL-MD-10）問題與svg上的CSS

繼承人的代碼

頁面

<div class="col-md-10"> 

    <div class="search"> 
    <svg version="1.1" viewBox="0 0 142.358 24.582"> 
    <path id="search-path" fill="none" d="M131.597,14.529c-1.487,1.487-3.542,2.407-5.811,2.407 
     c-4.539,0-8.218-3.679-8.218-8.218s3.679-8.218,8.218-8.218c4.539,0,8.218,3.679,8.218,8.218 
     C134.004,10.987,133.084,13.042,131.597,14.529c0,0,9.554,9.554,9.554,9.554H0"/> 
    </svg> 
    <label for="search" class="search-label"></label> 
    <input type="search" id="search" autocomplete="off" class="input-search"/> 
</div> 
</div> 

<script type="text/javascript"> 
/* 
Inspired by Dribble "Search..." 
    By: Anish Chandran 
    Link: http://drbl.in/nRxe 
*/ 

var searchField = $('.search'); 
var searchInput = $("input[type='search']"); 

var checkSearch = function(){ 
    var contents = searchInput.val(); 
    if(contents.length !== 0){ 
    searchField.addClass('full'); 
    } else { 
    searchField.removeClass('full'); 
    } 
}; 

$("input[type='search']").focus(function(){ 
    searchField.addClass('isActive'); 
}).blur(function(){ 
    searchField.removeClass('isActive'); 
    checkSearch(); 
}); 
</script> 

</div> 
<div class="col-md-12"> 
    <p color="white"> This is test text</p> 
</div>

而對於SVG的CSS是這裏

body { 
    background-color: #e9e9e9; 
} 

.search { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -300px; 
    width: 600px; 
} 

svg { 
    position: absolute; 
    transform: translateX(-246px); 
    width: 600px; 
    height: auto; 
    stroke-width: 8px; 
    stroke: #ED7710; 
    stroke-width: 1px; 
    stroke-dashoffset: 0; 
    stroke-dasharray: 64.6 206.305; 
    transition: all 0.5s ease-in-out; 
    stroke-linejoin: round; 
    stroke-linecap: round; 
} 

.input-search { 
    position: absolute; 
    width: calc(100% - 148px); 
    height: 125px; 
    top: 0; 
    right: 20px; 
    bottom: 0; 
    left: 0; 
    border: none; 
    background-color: transparent; 
    outline: none; 
    padding: 20px; 
    font-size: 50px; 
} 

.search-label { 
    position: absolute; 
    display: block; 
    width: 108px; 
    height: 108px; 
    top: 0; 
    left: 50%; 
    margin-left: -54px; 
    z-index: 100; 
    transition: 0.5s ease-in-out; 
} 

.isActive .search-label { 
    transform: translateX(246px); 
} 
.isActive svg { 
    stroke-dashoffset: -65; 
    stroke-dasharray: 141.305 65; 
    transform: translateX(0); 
} 
.isActive.full svg { 
    stroke-dashoffset: -65; 
    stroke-dasharray: 141.305 65; 
    transform: translateX(0); 
} 

.full .search-label { 
    transform: translateX(246px); 
} 
.full svg { 
    stroke-dashoffset: 0; 
    stroke-dasharray: 64.6 206.305; 
    transform: translateX(0); 
}

來源

2015-10-25 Tester123

您能分享這個網站嗎？如果它在線 –

它的本地主機只有對不起:( – Tester123

嘗試重新生成問題上[jsfiddle]（http://jsfiddle.net/） –

你可以叫你的SVG等的圖像，例如以<img src="yoursvg.svg" />，它仍然是SVG，它的殲在img標籤內的ust。如果你需要，給它一個寬度和高度。當你用img標籤調用它時，它通常表現得非常好，它對於響應也很好，並且不會對引導列產生奇怪的行爲。

然後調整JavaScript做搜索的東西，當有人點擊img標籤。

希望這會有所幫助

來源

2015-10-25 16:53:05 Goran

問題與svg上的CSS

回答

相關問題