在Chrome中无法正常显示svg动画

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 of 0时还是会呈现div一样，但也是a border thicker than 0。

如果你想解决这个问题，您可以添加类似visibility: hidden;或opacity: 0;到.framePath，然后添加相对动画（0％和 100％）