Question

我正在尝试将一个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;*/
}

Answer 1

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

我已经通过将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>

SVG背景仅适用于IE

1 个答案: