离开鼠标后 SVG 线停留在屏幕上

Question

我制作了一个 div，其中包含 4 条 svg 行。 悬停 div 时，x 轴和 y 轴会使用过渡和变换进行更改。

一切正常，正常工作，但是当我将鼠标从悬停字段中移开时，svg 线在屏幕上仅停留几个像素。

查看页面底部的示例..

任何解释/解决方案将不胜感激。

HTML：

<div class="blok">
    <svg width="200" height="100">
        <line class="left" x1="0" y1="0" x2="0" y2="-100"/>
        <line class="bottom" x1="-200" y1="100" x2="0" y2="100"/>
        <line class="right" x1="200" y1="100" x2="200" y2="200"/>
        <line class="top" x1="200" y1="0" x2="400" y2="0"/>
    </svg>
</div>

CSS：

.blok{
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
    background: #ddd;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;

}
svg line.top, line.bottom {
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
}

svg line.left, line.right {
    stroke-dasharray: 100;
    -webkit-transition: -webkit-transform .1s ease-out;
    transition: transform .1s ease-out;
}

svg line.top{
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
svg line.right{
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
svg line.bottom{
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}
svg line.left{
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}

.blok:hover svg line.left {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.blok:hover svg line.bottom {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}
.blok:hover svg line.right {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}
.blok:hover svg line.top {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}

JsFiddle HERE

Answer 1

您可以简化整个事情并在矩形周围设置一条线并转换stroke-dashoffset，而不是移动四条单独的线。

SVG

<svg width="200" height="100">
    <polyline class="line" points="0,0, 0,100, 200,100, 200,0 0,0"/>
</svg>

CSS

svg .line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}
svg .line {
    stroke-dashoffset: 600;
    -webkit-transition: stroke-dashoffset 0.5s ease-out;
    transition: stroke-dashoffset 0.5s ease-out;
}

.blok:hover svg .line {
    stroke-dashoffset: 0;
    -webkit-transition: stroke-dashoffset 0.5s ease-out;
    transition: stroke-dashoffset 0.5s ease-out;
}

Demo here

Answer 2

尝试从 svg 外部开始行

<div class="blok">
    <svg width="200" height="100">
        <line class="left" x1="0" y1="-5" x2="0" y2="-100"/>
        <line class="bottom" x1="-205" y1="100" x2="0" y2="100"/>
        <line class="right" x1="200" y1="105" x2="200" y2="205"/>
        <line class="top" x1="205" y1="0" x2="400" y2="0"/>
    </svg>
</div>

http://jsfiddle.net/shedali/vr8xj27n/