ストップ-色は、私は次のコードを持っているので、

Question

が動作していない：私は停止のCSSにstop-color:attr(c)を追加し、それに応じてそれらを変更した場合、興味深いことに

<?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> 

を（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でストップ色を追加属性
• として停止-色を追加します。