SVG边框动画在Safari中无法正常工作

Question

我在测试下面的代码时遇到Safari的问题，但动画在Chrome和Firefox中运行良好。

HTML：

<div>
    <svg width="100%" height="100%">
        <line class="top" x1="0" y1="0" x2="690" y2="0"></line>
        <line class="left" x1="0" y1="230" x2="0" y2="-400"></line>
        <line class="bottom" x1="230" y1="60" x2="-460" y2="60"></line>
        <line class="right" x1="230" y1="0" x2="230" y2="690"></line>
    </svg>
</div>

CSS：

div {
    width: 230px;
    height: 60px;
    margin: 100px;
    position: relative;
}
div svg {
    width: 100%;
    height: 100%;
    position: absolute;
}

div svg line {
    stroke-width: 2;
    stroke: #000;
    fill: none;
    stroke-dasharray: 230;
    -webkit-transition: all .6s;
    transition: transform .6s;
}
div:hover svg line.top {
    -webkit-transform: translateX(-460px);
    transform: translateX(-460px);
}
div:hover svg line.bottom {
    -webkit-transform: translateX(460px);
    transform: translateX(460px);
}
div:hover svg line.left {
    -webkit-transform: translateY(330px);
    transform: translateY(330px);
}
div:hover svg line.right {
    -webkit-transform: translateY(-460px);
    transform: translateY(-460px);
}

http://jsfiddle.net/e4frf6oa/2/

以及在Chrome和Safari中鼠标移动时的外观。

Answer 1

在这一行：

-webkit-transform: translateX(415px);
        transform: translateX(460px);

您为-webkit-transform和transform指定了不同的像素值。 Safari看起来很奇怪的原因是因为它使用-webkit-transform定义，而大多数其他浏览器使用transform定义。要解决此问题，您只需将webkit更改为460px。