停止，顏色CSS/SVG工作不

Question

所以，我有以下代碼：

<?xml version="1.0" standalone="yes"?> 
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240"> 
<style>stop{stop-opacity:1}circle{fill:url(#r)}</style> 
<defs> 
<radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
<stop offset="0%" style="stop-color:#ce1126"/> 
<stop offset="17%" style="stop-color:#e5911d"/> 
<stop offset="33%" style="stop-color:#fcd116"/> 
<stop offset="50%" style="stop-color:#18c063"/> 
<stop offset="67%" style="stop-color:#75aadb"/> 
<stop offset="83%" style="stop-color:#803ac5"/> 
<stop offset="100%" style="stop-color:#00335b"/> 
</radialGradient> 
</defs> 
<circle cx="150" cy="300" r="55"/> 
</svg> 

有趣的是，如果我添加stop-color:attr(c)到停止的CSS和相應的改動（style="stop-color: =>c="），它不起作用（或者至少不在Safari/iOS9中）。爲什麼是這樣？

Answer 1

有趣的是，Safari不支持這一點。這似乎在Firefox的工作：

<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240"> 
 
    <style> 
 
    stop { 
 
     stop-opacity: 1 
 
    } 
 
    circle { 
 
     fill: url(#r) 
 
    } 
 
    </style> 
 
    <defs> 
 
    <radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
 
     <stop offset="0%" style="stop-color:#ce1126" /> 
 
     <stop offset="17%" style="stop-color:#e5911d" /> 
 
     <stop offset="33%" style="stop-color:#fcd116" /> 
 
     <stop offset="50%" style="stop-color:#18c063" /> 
 
     <stop offset="67%" style="stop-color:#75aadb" /> 
 
     <stop offset="83%" style="stop-color:#803ac5" /> 
 
     <stop offset="100%" style="stop-color:#00335b" /> 
 
    </radialGradient> 
 
    </defs> 
 
    <circle cx="60" cy="100" r="55" fill="url(#r)" /> 
 
</svg>

我不會推薦在這樣做。 最支持的方法應該是：

• 添加停止顏色作爲屬性
• 類或ID添加到停止元素，並添加停止同色的CSS。