Question

我试图做一个简单的svg动画，其中一个菜单链接有一个svg下划线，我想设置该线的动画以创建一个非常简单的形状。基本上由7个锚点组成的单条线，其中中间3个锚点（每个设置为2个）将在Y轴上移动几个像素到顶部。

E.g。从这个：

到此：

这可能吗？我是否需要使用svg动画框架或者有更简单的方法吗？

或者我应该使用spring svg canvas的sprint和animate定位？

我很乐意提供任何帮助，谢谢。

Answer 1

我不确定你实际上是在追求什么。您的描述不明确。你的意思是这样吗？

svg {
  width: 260px;
  height: 100px;
  background: #212121;
}

path {
   fill: none;
   stroke: #79b;
   stroke-width: 8px;
}

<svg viewbox="0 0 260 100">
  <path d="M0,0">
    <animate attributeName="d" attributeType="XML"
       from="M10,75l40,0l40,0l40,0l40,0l40,0l40,0;"
       to="M10,75l40,-50l40,50l40,-50l40,50l40,-50l40,50"
       dur="1s" fill="freeze" />
  </path>
</svg>

Answer 2

我认为这可能与您最初要求的内容相近：

mysqli_

<?php 

    $host = 'localhost';
    $user = 'fulltime_admin';
    $pass = 'secret';
    $database = 'fulltime_db';

    $restart_from = 0;

    $db = mysql_connect($host, $user, $pass);
    mysql_query($database, $db);

    $filename = "ps4_emails.csv"; 
    $table = ""; 

    $handle = fopen('ps4_emails.csv', 'r');
    if ( ! $handle ) {
        echo 'File does not exists in this location';
        exit;
    }

    // is it a restart?
    if ( file_exists('restart.txt') ) {
        // its a restart
        $restart_from = file_get_contents('restart.txt');

        // read up the file to the last good row inserted
        for ( $i=0; $i<=$restart_from; $i++ ) {
            $data = fget($handle, 1000);
        }
    }

    $upd_cnt = restart_from;
    while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

        $query = "INSERT INTO `ps4_emails` (email) VALUES( '{$data[0]}')";        

        mysql_query($query,$db); 

        $upd_cnt++;
        file_put_contents('restart.txt', $upd_cnt);
    }
?>

$('a').on({
  mouseenter: function() {
    $(this).find('.animIn')[0].beginElement();
  },
  mouseleave: function() {
    $(this).find('.animOut')[0].beginElement();
  }
})

动画SVG锚点

2 个答案: