Aide à la programmation, réponses aux questions / Css / Arrière-plan SVG ne fonctionne que dans IE - css, html5, jquery-ui, svg

L’arrière-plan SVG ne fonctionne que dans IE - css, html5, jquery-ui, svg

J'essaie de mettre un fond radialGradient dansun cercle SVG et rien ne fonctionnera. Cela ne fonctionne que dans Internet Explorer. Même un fond de couleur unie ne fonctionnera pas. Je dois avoir configuré mon document de manière incorrecte. Peut-être est-ce dû au clonage à partir d’une copie cachée? ici. Je l'ai hébergé ici. Pour voir le cercle de problèmes, cliquez sur "Nouveau joueur". J'essaie maintenant en HTML5, mais je crois que j'ai aussi eu ce problème en xhtml.

index.html:

<!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body style="background-color:#EEEEEE;">
<div>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 225 140" preserveAspectRatio="xMidYMid slice"
id="d00" class="svg">
<defs>
<radialGradient cx="20%" cy="20%" id="gearShift">
<stop offset="0%" style="stop-color:white;"/>
<stop offset="80%" style="stop-color:black;"/>
</radialGradient>
<style type="text/css"><![CDATA[
.gear {
background: radial-gradient(ellipse at 20% 20%, white 20%, black 80%);
}
]]></style>
</defs>
<circle id="gear00" class="gear" cx="70" cy="20" r="10" style="stroke:black;" fill="url(#gearShift)" />
</svg>
</div>
</body>
</html>

styles.css:

.gear{
stroke:black;
background: radial-gradient(ellipse at 20% 20%, white 20%, black 80%);
background-color:red;
background-image:-webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
background-image:-webkit-linear-gradient(left, red, #f06d06);
background-image:linear-gradient(to right, red, orange);
}

J'ai commenté la règle suivante dans les styles.css qui montre au joueur 0 que tous les autres joueurs sont copiés. Cela permet d'afficher l'arrière-plan du cercle. Une fois que vous avez ajouté le joueur 1 lors du changement de joueur, chaque fois que le joueur 0 est masqué, l’arrière-plan de toutes les copies de ce cercle est masqué.

#_00, #sort00, #playertab00, .hidden {
/*display:none !important;*/
}

Réponses:

0 pour la réponse № 1

Désolé, cela pourrait être une copie de cette question. Il semble que le problème découle du fait que l'arrière-plan de la section defs est lié au cercle par un ID. Je le clonais et créais plusieurs radialGradients avec le même identifiant.

J'ai résolu ce problème en scindant la définition en son propre élément svg.

<body>
<svg xmlns="http://www.w3.org/2000/svg" id="svgDefs" class="svgDefs">
<defs>
<radialGradient cx="35%" cy="35%" id="gearShift">
<stop offset="0%" style="stop-color:white;stop-opacity:1"/>
<stop offset="50%" style="stop-color:black;"/>
</radialGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 225 140" preserveAspectRatio="xMidYMid slice"
id="d00" class="svg">
<circle id="gear00" class="gear" fill="url(#gearShift)" cx="70" cy="20" r="10" style="stroke:black;"/>
</svg>
</body>