在焦点上绘制 SVG 形状的动画最简洁的方法是什么？答案

【问题标题】：What is the most succinct way to animate the drawing of an SVG shape on focus?在焦点上绘制 SVG 形状的动画最简洁的方法是什么？
【发布时间】：2019-11-09 23:08:32
【问题描述】：

我一直在为网站进行这个（看似）简单的小改进工作太久了，我决定寻求帮助。

我希望我的联系表单字段的轮廓在焦点上的输入区域周围进行动画和绘制，就像在这个视频中一样 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="reachme@email.com" 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

非常感谢任何建议

提前致谢！

【问题讨论】：

标签： javascript jquery html css svg

【解决方案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');
})

【讨论】：