정지 컬러는 나는 다음과 같은 코드를 가지고, 그래서

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

사파리가이를 지원하지 않는다는 점에 흥미 롭습니다. 이것은 파이어 폭스에서 작동하는 것 같다 :

<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로 정지 색상을 추가 할 수 있습니다.