SVG 背景仅适用于 IE答案

【问题标题】：SVG background only works in IESVG 背景仅适用于 IE
【发布时间】：2017-10-16 08:33:40
【问题描述】：

我正在尝试将radialGradient 背景放入SVG 圆圈中，但没有任何效果。它仅适用于 Internet Explorer。即使只是纯色背景也行不通。我一定是错误地设置了我的文档。也许这是由于从隐藏副本中克隆所致？实际项目可见here。我有它托管here。要查看问题圈，请单击“新玩家”。我现在正在尝试使用 HTML5，但我相信我在 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);
}

我已经在styles.css 中注释掉了以下规则，它显示了所有其他玩家都是从中复制的玩家0。这允许显示圆圈的背景。一旦你在玩家之间切换时添加了玩家 1，每当玩家 0 被隐藏时，这个圆圈的所有副本的背景都会被隐藏。

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

【问题讨论】：

如果您尝试设置径向背景，为什么您的 CSS 包含线性渐变函数？
因为我什么都试过了。甚至连纯红色都无法工作。

标签： css html jquery-ui svg

【解决方案1】：

抱歉，这可能与 this question 重复。似乎问题源于 defs 部分中的背景通过 ID 链接到圆圈的事实。我正在克隆它并创建多个具有相同 ID 的径向渐变。

我已通过将 def 拆分为自己的 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>

【讨论】：