html - svg 动画无法在 Chrome 中正确显示

Question

我创建了一个绘制到舞台上的帧的 CSS SVG 动画。动画工作正常，但似乎主要在 Chrome 中存在问题。动画开始前舞台应该是空白的，帧由 4 段组成，逐段“绘制”。然而，在某些版本的 Chrome 中，在动画开始之前，舞台上有 4 个点。这些点是框架每个部分的起点，不应该是可见的。

在我测试过的几个 Chrome 版本中(Mac 为 47.0.2526.106，Android 手机为 47.0.2526.83，Windows 为 43.0.2357.130)，这些点是可见的。在旧版本的 Chrome(例如 Mac 为 43.0.2357.130)以及 Safari 和 Firefox 中，这些点是不可见的。还有其他人遇到过类似的问题吗？任何帮助将不胜感激。

Here 是 jsfiddle 中的一个工作示例。

这是 HTML:

<div id="mainContainer">
  <div id="bottomLeftPosition">
            <svg><path class="pathBottomLeft framePath" d="M127.504,105.451
                c1.394-0.461,0.629-2.404,0.735-3.859c0.047-0.719,0.826-1.225,0.368-2.021c-0.338-0.598-1.333-0.398-2.39-0.735
                c-1.424-0.442-1.931-1.087-3.493-0.735c-2.143,0.475-7.396,4.611-8.453,6.25c-0.674,1.041-1.501,3.322-1.471,4.227
                c0.045,1.363,2.036,4.655,2.573,5.146c2.036,1.852,6.769,2.986,10.107,2.389c1.715-0.307,2.97-1.578,4.593-1.654
                c2.084-2.389,4.381-4.564,6.066-7.352l0.887-5.713l-1.071-5.314c-1.286-3.615-4.104-5.696-6.064-8.637
                c-1.579-0.965-3.461-1.058-5.147-1.84c-0.75-0.352-1.254-1.148-2.021-1.47c-1.775-0.735-3.98-0.245-5.696-1.47
                c-7.427-0.858-13.187,0.994-19.665,2.021c-14.793,5.359-29.726,12.865-42.453,20.766c-1.011,0.628-2.022,1.426-3.125,2.021
                c-1.93,1.043-3.293,1.533-5.697,2.389c-1.256,0.445-2.39,1.38-3.492,1.654c-4.642,1.166-9.604-1.285-12.498-4.225
                c-0.934-2.758-2.573-5.451-2.389-9.926c0.077-1.852,1.01-3.538,0.551-5.329c3.186-8.179,6.616-16.249,11.578-23.708
                c0.415-0.627,1.226-1.041,1.655-1.654c0.643-0.934,0.872-2.266,1.47-3.307c0.551-0.98,1.547-1.7,2.022-2.573
                c1.592-2.911,2.389-7.168,2.94-10.66c0.245-1.547-0.261-2.925-0.368-4.595c-0.092-1.409,0.23-2.879,0.185-4.411
                c-0.092-3.768-0.766-8.071-1.287-11.946c-0.291-2.145-0.26-4.84-1.103-6.8c-1.057-2.466-3.277-3.538-4.594-6.065
                c-2.251-0.75-4.519-1.485-6.433-2.572L29.73,14.11c-2.634,0.214-3.967,1.777-6.065,2.94C21,20.665,13.879,30.804,18.152,35.98
                c2.205,2.665,4.456,6.249,8.821,4.228c0.583-2.144,4.028-3.905,5.513-6.616c0.199-0.368,0.153-1.011,0.368-1.471
                c0.367-0.75,0.995-1.24,1.103-1.837c0.062-0.367-0.336-3.89-0.551-4.595c-0.75-2.542-3.706-2.036-4.594,0"/></svg>
  </div>
  <div id="topLeftPosition">
    <svg><path class="pathTopLeft framePath" d=
      "M29.638,109.531c1.792-2.664,3.92-8.469,1.838-12.13c-0.75-0.123-1.087-0.55-1.654-0.919c-1.118-0.703-1.731-1.071-2.94-1.654
                c-1.348-0.643-0.919-0.489-2.573-0.551c-1.976-0.062-2.665,0.443-4.043,1.654c-2.604,2.297-5.146,5.514-5.513,9.373
                c-0.705,7.458,4.717,12.42,9.924,14.702c0,0,2.281,0.2,2.343,0.214c0.138,0,2.251-0.582,2.251-0.582
                c1.93-0.918,3.094-2.449,4.595-3.857c1.057-0.981,2.22-1.303,3.124-2.572c0.521-0.736,1.011-1.824,1.654-2.758
                c0.583-0.857,1.486-1.73,1.838-2.389c0.384-0.719,0.245-1.593,0.552-2.572c0.275-0.857,1.042-1.762,1.286-2.573
                c0.903-2.972,0.659-7.366,0.552-10.292c-0.261-7.488-2.405-13.509-4.778-19.481c-0.751-1.915-2.083-3.476-2.941-5.33
                c-0.628-1.362-1.087-2.817-1.838-4.226c-0.95-1.792-2.359-2.772-2.573-5.146c-2.374-3.553-3.584-7.903-4.962-12.129
                c-0.475-1.456-1.287-3.064-1.471-5.513c-0.367-4.992,1.976-9.327,3.86-13.417c1.271-2.772,2.71-5.252,4.41-6.799
                c5.989-5.438,16.847-8.333,26.648-8.088c4.794,0.123,9.909,0.581,14.152,2.021c1.486,0.506,3.032,1.286,4.595,1.837
                c1.593,0.552,3.384,0.98,4.779,1.654c1.838,0.889,3.553,2.39,5.329,3.492c3.095,1.915,5.667,3.048,8.086,5.331
                c2.543,2.404,4.442,5.482,6.802,7.902c2.557,2.635,5.713,4.012,8.453,6.249c2.863,0.812,5.729,1.624,7.902,3.124
                c11.579,2.635,21.748-2.113,25.729-9.924c0,0,1.47-9.266,0.919-11.548c0.046-0.72-1.103-4.809-1.103-4.809
                c-1.424-2.374-2.895-4.028-5.022-5.698c-0.949-0.827-3.568-2.803-6.785-1.179c-2.955,2.144-5.851,7.596-2.298,11.026
                c2.358,2.268,6.311,1.731,9.558,2.206"/></svg>
  </div>
  <div id="topRightPosition">
    <svg><path class="pathTopRight framePath" d="M25.065,32.641
                c0,0,4.334-2.696,4.518-2.833c2.696-1.869,5.728-2.864,6.065-6.616c-0.995-7.259-8.883-7.32-12.772-4.15
                c-2.849,2.312-5.391,7.473-5.391,12.512c0,2.021-0.015,5.223,0.919,7.352c0.674,1.532,2.925,3.706,4.962,4.411
                c0.719,0.246,1.776,0.124,2.572,0.368c1.761,0.536,2.451,1.363,5.33,1.103c6.371-0.567,12.023-1.516,17.827-2.94
                c1.257-0.307,2.052-0.842,3.309-1.287c1.593-0.582,3.385-0.582,4.963-1.103c2.894-0.965,5.773-2.375,8.637-3.492
                c3.033-1.179,6.126-2.205,9.005-3.492c6.294-2.818,12.649-7.03,19.113-9.557c2.528-0.995,5.054-1.562,7.167-3.124
                c0.675,0.061,1.195-0.031,1.654-0.184c4.624-2.926,12.865-3.645,19.113-3.676c1.041,0.612,2.129,1.179,3.676,1.286
                c3.047,2.007,6.77,4.793,8.637,8.822c1.656,3.553,2.145,7.888,2.574,12.314c0.229,2.451-0.385,5.314-0.367,7.903
                c0.107,13.768-7.704,24.688-11.763,35.653c-2.466,2.236-2.772,5.896-4.593,9.924c-0.322,0.721-0.995,1.286-1.287,2.021
                c-2.344,5.881-3.83,15.408-0.185,20.217c1.685,2.221,7.169,4.977,10.661,3.859c2.268-0.72,3.521-2.543,5.145-4.41
                c0.245-6.005-2.387-9.129-5.879-11.396c-1.104,0.309-1.93-0.211-2.757,0.369c-0.49,0.703-0.124,1.393-0.185,2.389"/></svg>
  </div>
  <div id="bottomRightPosition">
    <svg><path class="pathBottomRight framePath" d="
                M133.236,18.858c0.106,1.517-3.018,6.448,0.184,7.168c1.256,0.275,3.782-1.087,4.962-1.838c2.757-1.761,4.228-5.773,4.779-8.271
                c-0.981-2.189-2.282-4.793-4.595-5.88c-3.645-1.716-8.867-0.153-11.027,2.205c-2.45,2.68-4.41,7.979-4.778,13.049
                c-0.291,4.088,0.95,6.371,3.308,8.454c1.961,1.746,4.61,2.788,6.618,4.595c0.153,0.138,0.353,0.521,0.55,0.735
                c2.007,2.159,3.507,4.441,4.963,7.536c0.658,1.393,1.026,5.575,1.471,7.657c0.628,2.91,1.623,6.264,1.838,9.005
                c0.904,11.777-0.154,23.968-6.8,31.611c-1.731,1.163-3.309,2.647-5.147,3.858c-1.699,1.103-3.415,2.634-5.329,3.492
                c-0.873,0.382-2.006,0.382-2.94,0.733c-5.238,1.962-11.104,2.59-17.828,3.31c-4.762,0.521-8.898,0.949-14.52,1.103
                c-4.746,0.123-9.158,1.103-12.864-0.184c-3.69-0.153-6.708-2.129-10.475-2.205c-2.328-1.348-5.452-2.465-8.086-2.94
                c-1.731-1.808-5.299-1.257-7.167-2.206c-0.888-0.153-0.659,0.812-1.654,0.552c-1.501-0.644-3.033-1.257-4.779-1.654
                c-0.627-0.169-0.536-1.058-1.103-1.286c-2.971-0.904-4.961-3.554-7.718-4.596c-0.384-0.137-0.98,0.123-1.471,0
                c-0.949-0.229-1.898-1.147-2.756-1.285c-9.802-1.517-18.486,8.055-16.54,17.09c0.321,1.486,0.413,3.493,2.052,5.897
                c3.752,4.364,7.918,1.716,10.66-1.286c1.47-1.609,3.614-8.729,0.276-9.006c-2.85-0.23-5.391,3.338-5.882,3.491"/></svg>
  </div>
  <div id="border"></div>
    </div>

还有 CSS:

body {
    margin:0; 
    padding:0;
}
#mainContainer{
    position: relative;
    width: 300px;
    height: 600px;
    overflow: hidden;
    background-color: #fff;
}
#border{ 
    position:absolute; 
    width:298px; 
    height:598px; 
    border:solid 1px #000; 
}
#bottomLeftPosition{
    position:absolute;
    left:5px;
    top:231px;
}
#topLeftPosition{
    position:absolute;
    left:9px;
    top:123px;
}
#topRightPosition{
    position:absolute;
    left:140px;
    top:116px;
}
#bottomRightPosition{
    position:absolute;
    left:130px;
    top:226px;
}
.framePath {
    width:160px;
    height:130px;
    fill:none;
    stroke:#000;
    stroke-width:3;
    stroke-linecap:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.pathBottomLeft {
    animation: dash 1.7s linear 1.5s forwards;
    -webkit-animation: dash 1.7s linear 1.5s forwards;
    -moz-animation: dash 1.7s linear 1.5s forwards;
}
.pathTopLeft {
    animation: dash 1.7s linear 2.2s forwards;
    -webkit-animation: dash 1.7s linear 2.2s forwards;
    -moz-animation: dash 1.7s linear 2.2s forwards;
}
.pathTopRight {
    animation: dash 1.7s linear 2.9s forwards;
    -webkit-animation: dash 1.7s linear 2.9s forwards;
    -moz-animation: dash 1.7s linear 2.9s forwards;
}
.pathBottomRight {
    animation: dash 1.7s linear 3.5s forwards;
    -webkit-animation: dash 1.7s linear 3.5s forwards;
    -moz-animation: dash 1.7s linear 3.5s forwards;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }

  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }

  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

Answer 1

我不一定认为这是一个错误，但肯定应该修复它。因为有一条线的长度似乎为 0，所以您会认为它是不可见的。但是在这些 Chrome 版本中，将呈现一条长度为 0 且笔划宽度为正的线。就像当 height 为 0 但 border 比 0 厚 时，浏览器仍将呈现 div。

如果你想解决这个问题，你可以在.framePath中添加visibility: hidden;或opacity: 0;，然后添加相反的动画(在 0% 和 100%)