在焦点上对 SVG 形状的绘制进行动画处理的最简洁方法是什么

Question

我一直在为一个网站做这个(看似(简单的小增强功能太久了，我决定寻求帮助。

我希望我的联系人表单字段的轮廓在焦点输入区域周围进行动画和绘制，如本视频 http://tinypic.com/r/ofrb4h/9

我已经找到了一种为 svg 制作动画的方法，但不知道如何将其放在我的表单之上，而且我不确定这是否是最好的方法。

这是 html 代码和 CodePen 来配合它：

<div class="container-div">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 501" class="blue">
        <path class="outline-path" id="outline" fill="none" stroke="teal" stroke-width="3"
         d="M 385.00,193.50
            C 404.00,195.75 406.25,228.00 385.25,230.75
              385.25,230.75 67.00,230.25 67.00,230.25
              46.50,228.75 45.25,197.25 67.25,193.25
              67.25,193.25 385.00,193.50 385.00,193.50 Z" 
         />
    </svg>
</div>
<form class="contact-form">
    <div class="form-group">
        <p>Name:</p> <label for="name">Full Name</label>
        <input type="text" class="form-inline name-input" name="name"
            id="name" placeholder="Cal Critter" oninput="nameFunction()"/>
        <br>
        <p>Email:</p> 
        <label for="email">Email</label>
        <input type="email" class="form-inline email-input" name="email"
            id="email" placeholder="[e-mail]" oninput="emailFunction()"/>
        <br>
        <p>Rough Budget:</p>
        <div class="selectdiv"><label for="budget">Budget</label><select name="budget" id="budget"
                class="budget-input">
                <option class="select-dropdown" value="Less Than $5,000" selected>Less Than $5,000</option>
                <option class="select-dropdown" value="$5,000 - $20,000">$5,000 - $20,000</option>
                <option class="select-dropdown" value="$20,000 - $50,000">$20,000 - $50,000</option>
                <option class="select-dropdown" value="$50,000 - $100,000">$50,000 - $100,000</option>
                <option class="select-dropdown" value="$100,000 - $500,000">$100,000 - $500,000</option>
                <option class="select-dropdown" value="More Than $500,000">More Than $500,000</option>
                <option class="select-dropdown" value="?">?</option>
            </select>
        </div>
        <br>
        <p>Message:</p> 
        <label for="message">Message</label>
        <textarea class="form-inline  message-input" name="message"
            id="message" rows="10" cols="30" placeholder="Tell us a little about your project here..."
            oninput="messageFunction()">
        </textarea>
    </div>
    <button class="" type="submit">SEND</button>
</form>

https://codepen.io/AshleyMSherwood/pen/bREawx

我真的很感激任何建议

提前感谢！

Answer 1

要触发焦点效果，您可以使用此代码。

var inputBox = document.querySelector('input');
inputBox.addEventListener('focus', function(){
   document.querySelector('path').classList.add('outline-path');
   document.querySelector('.container-div').style.display = "block";
})

添加此代码以消除对"模糊"的影响。

inputBox.addEventListener('blur', function(){
   document.querySelector('.container-div').style.display = "none";
   document.querySelector('path').classList.remove('outline-path');
})