Impostazione del punto focale esterno SVG Gradient Radius Clips The Gradient on Chrome

Question

Sono nuovo qui e posso avere alcune domande che possono essere troppo semplici.

Recentemente devo imparare svg, e ho trovato qualcosa perplesso.

Questo

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"> 
 
<defs> 
 
    <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.13" fy="0.13"> 
 
     <stop offset="0%" stop-color="red"/> 
 
     <stop offset="100%" stop-color="blue"/> 
 
    </radialGradient> 
 
</defs> 
 
    
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/> 
 
</svg>

Cosa capita di superiore sinistro? Sono debole in matematica e sono consapevole che questo è un problema matematico. Qualcuno può aiutarmi?

Answer 1

Hai mappato il 0% del gradientStop (il vostro fx/fy) ad un punto al di fuori del raggio del gradiente (il tuo cx/cy), e non viene visualizzato. Nota che quando cambi fx/fy appena dentro l'area del gradiente, viene visualizzato correttamente. (Questo è un bug di Chrome - se il punto focale è specificato al di fuori dell'area del gradiente, dovrebbe essere impostato nel punto più vicino sul perimetro dell'area. Questo è correttamente gestito in IE e Firefox. questo.)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"> 
 
<defs> 
 
    <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15"> 
 
     <stop offset="0%" stop-color="red"/> 
 
     <stop offset="100%" stop-color="blue"/> 
 
    </radialGradient> 
 
</defs> 
 
    
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/> 
 
</svg>

Answer 2

Prova questo - ho cambiato sia fx e fy a 50%

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"> 
 
<defs> 
 
    <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="50%" fy="50%"> 
 
     <stop offset="0%" stop-color="red"/> 
 
     <stop offset="100%" stop-color="blue"/> 
 
    </radialGradient> 
 
</defs> 
 
    
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/> 
 
</svg>