Проблема с css на svg

Question

У меня есть эта проблема, на данный момент у меня действительно хороший поиск svg. Проблема в том, что класс div col-md-10 является странным. ITs получил только высоту px на 1px. (Даже несмотря на то, SVG больше, Heres изображения, так что вы можете увидеть (я уже проделал инспектировать элемент, и вы можете увидеть Col-MD-10)

Heres код страницы

<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> 

И CSS для SVG здесь

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); 
} 

Answer 1

Вы можете позвонить SVG, как изображения. Например с <img src="yoursvg.svg" />. он по-прежнему будет .SVG, это J ust в теге img. Дайте ему ширину и высоту, если вам нужно. Когда вы вызываете его с помощью тега img, он обычно ведет себя очень хорошо, он также хорош для отзывчивости, и у вас не будет странного поведения с колонками начальной загрузки.

Затем отрегулируйте javascript, чтобы выполнять поиск, когда кто-то нажимает на тег img.

Надеюсь, что это поможет