Ich versuche einen radialGradient - Hintergrund inein SVG-Kreis und nichts wird funktionieren. Es funktioniert nur in Internet Explorer. Selbst nur ein einfarbiger Hintergrund funktioniert nicht. Ich muss mein Dokument falsch eingerichtet haben. Möglicherweise ist dies auf das Klonen einer versteckten Kopie zurückzuführen Hier. Ich habe es gehostet Hier. Um den Problemkreis anzuzeigen, klicken Sie auf "Neuer Spieler". Ich versuche es jetzt in HTML5, aber ich glaube, dass ich dieses Problem auch in xhtml hatte.
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);
}
Ich habe die folgende Regel in Stilen auskommentiert.css zeigt den Spieler 0 an, von dem alle anderen Spieler kopiert werden. Dadurch kann der Hintergrund des Kreises angezeigt werden. Wenn Sie Spieler 1 hinzugefügt haben, während Sie Spieler 0 wechseln, wird der Hintergrund aller Kopien dieses Kreises ausgeblendet.
#_00, #sort00, #playertab00, .hidden {
/*display:none !important;*/
}
Antworten:
0 für die Antwort № 1Sorry, das könnte ein Duplikat von sein diese Frage. Es scheint, dass das Problem auf die Tatsache zurückzuführen ist, dass der Hintergrund im Abschnitt defs durch eine ID mit dem Kreis verbunden ist. Ich habe es geklont und mehrere RadialGradients mit derselben ID erstellt.
Ich habe dies behoben, indem ich das def in ein eigenes svg-Element aufteilte.
<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>