Setting Focal Point Outside SVG Gradient Radius Clips The Gradient on Chrome

Question

I am new here and may have some questions which can be too simple.

Recently I have to learn svg ,and I found something puzzled.

This one

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

What happen to top left corner ? I am weak in Math and I am aware that this is a mathmatical problem.May anyone help me?

Answer 1

You have mapped the 0% of the gradientStop (your fx/fy) to a point outside the radius of the gradient (your cx/cy), and it's not displaying. Note that when you change your fx/fy to just inside the gradient area, it displays just fine. (This is a Chrome bug - if the focal point is specified outside the gradient area, it's supposed to be set at the closest point on the area's perimeter. This is correctly handled in IE and Firefox. I guess I'm filing a bug on this.)

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