0
私はSVGサークルにradialGradientバックグラウンドを配置しようとしていますが、何も動作しません。 Internet Explorerでのみ動作します。単色の背景色だけでは機能しません。私は自分の文書を間違ってセットアップしなければなりません。たぶんこれは隠しコピーからの複製によるものでしょうか？実際のプロジェクトはhereです。私はそれをホストしましたhere。問題のサークルを確認するには、「新規プレーヤー」をクリックします。私は今HTML5で試していますが、私はxhtmlでもこの問題があったと思います。SVG背景はIEでのみ動作します
の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を：私は他のすべてのプレイヤーがコピーされているプレイヤー0を示し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);
}
から。これにより、円の背景が表示されます。プレイヤー間で切り替えるときにプレーヤー1を追加すると、プレーヤー0が非表示になると、このサークルのすべてのコピーの背景が非表示になります。
#_00, #sort00, #playertab00, .hidden {
/*display:none !important;*/
}
放射状の背景を設定しようとすると、CSSにリニアグラデーション関数が含まれているのはなぜですか？ –
私はすべてを試していたので。赤くてもうまく動かない。 – thtNkdSquirl