J'ai un SVG en ligne et je veux l'animer en survol. La façon dont il est censé regarder, après avoir plané, un cercle grandit et inverse le SVG. C'est à dire. ce qui était opaque est maintenant transparent. Cela est fait en utilisant une transition CSS sur le paramètre radius d'un cercle à l'intérieur d'un masque.Problèmes de transition SVG dans Chrome et Opera
L'animation fonctionne parfaitement dans Safari, mais pas dans Chrome et Opera. Dans ces navigateurs, il agit très bizarre. En bref, il semble que repeindre le SVG seulement lorsque le curseur quitte l'écran. Firefox ne fait rien du tout, mais je l'attribue à l'absence de préfixes vendeor.
Nous vous remercions de votre aide à l'avance!
Comment puis-je y remédier? Quelles approches alternatives je peux prendre?
Voici un stylo de celui-ci (ne semble pas animer): http://codepen.io/anon/pen/LGNaBw
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
body
{
width:100%;
height:100%;
background: #0F0F0F;
}
svg
{
position: relative;
width: 60%;
height:60%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#svg_tm
{
transition: r 350ms;
}
svg:hover #svg_tm
{
r: 50;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<circle id="svg_tm" cx="50" cy="50"></circle>
<path id="svg_ts" d="M86.915 27.103c-2.716 1.204-5.636 2.02-8.7 2.385 3.128-1.875 5.53-4.843 6.66-8.38-2.926 1.735-6.168 2.996-9.618 3.675C72.494 21.84 68.557 20 64.2 20c-8.365 0-15.147 6.782-15.147 15.147 0 1.187.134 2.343.392 3.452-12.588-.633-23.75-6.663-31.22-15.827-1.304 2.237-2.05 4.838-2.05 7.615 0 5.255 2.673 9.89 6.737 12.607-2.482-.08-4.818-.76-6.86-1.894l-.002.19c0 7.34 5.222 13.462 12.15 14.854-1.27.346-2.608.53-3.99.53-.976 0-1.925-.094-2.85-.27C23.29 62.42 28.883 66.8 35.51 66.92c-5.184 4.063-11.715 6.484-18.812 6.484-1.222 0-2.428-.07-3.613-.21C19.788 77.492 27.75 80 36.305 80 64.164 80 79.4 56.92 79.4 36.903c0-.657-.014-1.31-.043-1.96 2.96-2.135 5.527-4.803 7.558-7.84"/>
<mask id="svg_ta">
<use xlink:href="#svg_ts" fill="#fff"></use>
<use xlink:href="#svg_tm"></use>
</mask>
<mask id="svg_tb">
<use xlink:href="#svg_tm" fill="#fff"></use>
<use xlink:href="#svg_ts"></use>
</mask>
</defs>
<circle r="50" cx="50" cy="50" fill="#F0F0F0" mask="url(#svg_ta)"></circle>
<circle r="50" cx="50" cy="50" fill="#F0F0F0" mask="url(#svg_tb)"></circle>
</svg>
</body>
</html>
ce que le 'r' dans' transition: r 350ms; 'signifie? – oak
C'est la propriété radius du cercle animé. C'est comme ça qu'on l'appelle en SVG. – Golui
Élever un bug Chrome sur leur bugtracker. –