webkit - SVG-Animation Transformation bleibt bestehen, nachdem es nicht sollte

Question

Es gibt ein seltsames Verhalten in Chrome, wo die Animation letzten Frame weiterhin besteht, nachdem es keine Animation mehr geben sollte. Das funktioniert gut in Firefox.

(Versuchen Sie, den Kreis schwebt dann schweben-out)

Demo playground

* { margin: 0; padding: 0; } 
 

 
@keyframes foo { 
 
    50% { transform: scale(2); } 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
circle:hover { animation: 2s foo infinite; } 
 

 
.point { 
 
    stroke-width: 1px; 
 
    stroke-opacity: .2; 
 
    fill-opacity: .5; 
 
    transition-property: opacity, fill; 
 
    fill: red; 
 
    stroke: red; 
 
} 
 

 
.point.stroke { 
 
    fill-opacity: .3; 
 
}

<svg> 
 
    <g transform="translate(65, 70)"> 
 
     <circle class="point stroke" r="25"/> 
 
     <circle class="point" r="25"/> 
 
    </g> 
 
</svg>

Answer 1

transform:scale(1) als Standard-CSS für die .stroke setzen scheint diese

Answer 2

Ihr Problem zu beheben, geben dem Kreis eine Standard-Transformation, die es zurück gehen sollte wenn der Hover-Status beendet ist. Zum Beispiel:

.point { 
    ... 
    transform: scale(1); 
} 

* { margin: 0; padding: 0; } 
 

 
@keyframes foo { 
 
    50% { transform: scale(2); } 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
circle:hover { animation: 2s foo infinite; } 
 

 
.point { 
 
    stroke-width: 1px; 
 
    stroke-opacity: .2; 
 
    fill-opacity: .5; 
 
    fill: red; 
 
    stroke: red; 
 
    transform: scale(1); 
 
} 
 

 
.point.stroke { 
 
    fill-opacity: .3; 
 
}

<svg> 
 
    <g transform="translate(65, 70)"> 
 
     <circle class="point stroke" r="25"/> 
 
     <circle class="point" r="25"/> 
 
    </g> 
 
</svg>