SVG背景只適用於IE瀏覽器

我試圖在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的：

.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;*/ 
}

來源

2017-09-22 thtNkdSquirl

如果你想設置徑向背景爲什麼你的CSS包含線性漸變函數？ –

因爲我在嘗試一切。甚至不能堅實的紅色工作。 – thtNkdSquirl

對不起，這可能是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>

來源

2017-10-11 23:52:28 thtNkdSquirl

SVG背景只適用於IE瀏覽器

回答

相關問題