Einstellen des Fokuspunkts außerhalb des SVG Gradient Radius Clips Der Farbverlauf auf Chrome

Question

Ich bin neu hier und habe vielleicht einige Fragen, die zu einfach sein können.

Kürzlich muss ich Svg lernen, und ich fand etwas verwirrt.

Dieses

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

Was linke Ecke passieren nach oben? Ich bin schwach in Mathematik und mir ist bewusst, dass dies ein mathematisches Problem ist. Kann mir jemand helfen?

Answer 1

Sie haben die 0% der GradientStop (fx/fy) zu einem Punkt außerhalb des Radius abgebildet der Gradient (Ihre cx/cy), und es wird nicht angezeigt. Beachten Sie, dass wenn Sie Ihre FX/FY nur innerhalb des Farbverlaufsbereichs ändern, es gut angezeigt wird. (Dies ist ein Chrome-Bug - wenn der Fokuspunkt außerhalb des Farbverlaufsbereichs liegt, sollte er auf den nächstgelegenen Punkt am Rand des Bereichs eingestellt werden. Dies wird in IE und Firefox korrekt gehandhabt. Ich denke, ich füge einen Fehler ein dies.)

<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

Try this - änderte ich sowohl fx und fy zu 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>