Разработка автоматического изменения размера текстового поля с svg

Question

Я делаю сайт, который почти завершен, мне просто нужно закончить контактный раздел. Я сделал классный небольшой дизайн для ввода, и они работают хорошо, по большей части. Но теперь я создаю текстовое поле, которое должно быть похоже, но это не так. Я использую плагин autosize, просто дайте ему быстрый поиск в Google, и вы узнаете, что это такое. Он отлично подходит для определения размера текстового поля, хотя это делает его очень странным с позиционированием. Наряду с этим, я пытаюсь изменить размер анимации строки SVG, которая окружает ее вместе с текстовым полем. Я разместил код here. Как вы можете видеть, анимация хорошо работает в окне ввода, но она не работает вообще в поле textarea. Я могу сделать это одушевленным в центре внимания, но теперь мое беспокойство кроется в изменении размера, которое всегда просто окружает текстовое пространство.

Вот код:

<div class="svg-wrapper-input"> 
    <svg height="60" width="277" xmlns="http://www.w3.org/2000/svg"> 
    <rect class="shape-input" height="60" width="277" /> 
    </svg> 
    <input class="text" placeholder="E-Mail Address"> 
    </input> 
</div> 

<div class="svg-wrapper-input"> 
    <svg class="textarea" height="200" width="277" xmlns="http://www.w3.org/2000/svg"> 
    <rect class="shape-input" height="200" width="277" /> 
    </svg> 
    <textarea class="text message" placeholder="Message"></textarea> 
</div> 

---

body { 
    background: #161616; 
} 

.shape-input { 
    fill: transparent; 
    stroke-dasharray: 279 394; 
    stroke-dashoffset: 337; 
    /*stroke-dasharray: 320; 
    stroke-dashoffset: -474;*/ 
    stroke-width: 2px; 
    stroke: #19f6e8; 
    -webkit-animation: 0.8s draw-out-input ease forwards; 
    -moz-animation: 0.8s draw-out-input ease forwards; 
    -o-animation: 0.8s draw-out-input ease forwards; 
    animation: 0.8s draw-out-input ease forwards; 
} 

.svg-wrapper-input { 
    height: 60px; 
    margin: 0 auto; 
    padding: 5px 0; 
    width: 277px; 
    display: block; 
    text-decoration: none; 
} 

input { 
    outline: none; 
    border: 0px; 
    background: transparent; 
    letter-spacing: 2px; 
    padding-left: 25px; 
    padding-right: 25px; 
    width: 227px; 
} 

@keyframes draw-in-input { 
    0% { 
     stroke-dasharray: 279 394; 
     stroke-dashoffset: -337; 
    } 
    100% { 
     stroke-dasharray: 760; 
     stroke-dashoffset: 0; 
    } 
} 

@keyframes draw-out-input { 
    0% { 
     stroke-dasharray: 760; 
     stroke-dashoffset: 0; 
    } 
    100% { 
     stroke-dasharray: 279 394; 
     stroke-dashoffset: -336; 
    } 
} 

.svg-wrapper:hover .shape { 
    -webkit-animation: 0.5s draw-in ease forwards; 
    -moz-animation: 0.5s draw-in ease forwards; 
    -o-animation: 0.5s draw-in ease forwards; 
    animation: 0.5s draw-in ease forwards; 
} 

.input-active { 
    -webkit-animation: 0.8s draw-in-input ease forwards; 
    -moz-animation: 0.8s draw-in-input ease forwards; 
    -o-animation: 0.8s draw-in-input ease forwards; 
    animation: 0.8s draw-in-input ease forwards; 
} 

.text { 
    color: #fff; 
    font-family: 'Montserrat'; 
    font-size: 16px; 
    letter-spacing: 8px; 
    line-height: 60px; 
    position: relative; 
    top: -64px; 
    margin: 0; 
} 

textarea { 
    border: 0; 
    outline: none; 
    background: transparent; 
    padding-left: 25px; 
    letter-spacing: 2px !important; 
    padding-right: 25px; 
    padding-top: 25px; 
    width: 227px; 
    top: -202px !important; 
    resize: none; 
    overflow: auto; 
    line-height: 20px !important; 
} 

---

$(".svg-wrapper-input > input").focus(function() { 
    $(this).siblings("svg").children(".shape-input").toggleClass("input-active"); 
}); 

$(".svg-wrapper-input > input").focusout(function() { 
    $(this).siblings("svg").children(".shape-input").toggleClass("input-active"); 
}); 

autosize($('textarea')); 
$('.message').keydown(function(){ 
    var msgHeight = $('.message').height(); 
    $('.textarea').attr('height', msgHeight); 
    $('.textarea > .shape').attr('height', msgHeight); 
}); 

EDIT: По какой-то причине Авторазмер не работает в codepen демо, если вы хотите увидеть его в действии , here's a link to the actual site.

ДРУГОЙ РЕДАКТИРОВАНИЕ: Я получил кодекс, чтобы работать, я также обновил код, чтобы он выглядел лучше, но все еще не работает правильно. Пожалуйста помоги.

Answer 1

Здесь несколько вещей не так ... ну, не обязательно неправильно, но не работает вместе. Одним из них является расположение текстового поля в сочетании с оберткой. Это правильное определение размера, но вы вынуждаете его не работать.

Выделите элемент с помощью инспектора кода и посмотрите, что он делает. Вы увидите, что размер, казалось бы, изменяется правильно, но он не в состоянии, что делает его видимым. Исправить это будет изменение позиции.

Прокрутите страницу вниз в CSS, чтобы увидеть изменения. http://codepen.io/mattkenefick/pen/LZWYQZ

/** 
* Modifications to make it fit 
*/ 
.svg-wrapper-input { 
    position: relative; 
} 

.svg-wrapper-input textarea { 
    position: absolute; 
    top: 0 !important; 
} 

Сделать абсолютная среда вращаются arond обертки и заставить текстовое поле в верхней части. Есть много способов обмануть этого кота, но это должно сделать трюк.