Ustawianie punktu ogniskowania poza SVG Klipy gradientu promienia Gradient na chromie

Question

Jestem tutaj nowy i mogę mieć kilka pytań, które mogą być zbyt proste.

Ostatnio muszę się nauczyć svg i znalazłem coś zaintrygowanego.

Ten

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

Co wydarzy się w lewym górnym rogu? Jestem słaby w matematyce i mam świadomość, że jest to problem matematyczny. Czy ktokolwiek może mi pomóc?

Answer 1

Masz zmapowali 0% z gradientStop (Twój FX/fy) do punktu poza promieniem gradientu (twój cx/cy) i nie wyświetla się. Zauważ, że po zmianie fx/fy na obszar gradientu, wyświetla się dobrze. (Jest to błąd Chrome - jeśli punkt ogniskowania jest określony poza obszarem gradientu, powinien być ustawiony w najbliższym punkcie obwodu obszaru.Jest to poprawnie obsługiwane w IE i Firefox. Chyba zgłaszam błąd ten.)

<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

Spróbuj tego - Zmieniłem zarówno fx i fy do 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>