Радиальный градиент в SVG

Радиальный градиент определяется аналогично линейному. Также задаются стопы. Только если в линейном градиенте стопы расположены по прямой то в радиальном градиенте стопы расположены по кольцам. Эти кольца напоминают кольца, которые образуются если бросить камешек в воду. 

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">
    <defs>
        <radialGradient id="gradientDefinition" gradientUnits="userSpaceOnUse">
            <stop stop-color="yellow" offset="0%"/>
            <stop stop-color="black" offset="100%"/>
        </radialGradient>
    </defs>
    
    <rect x="65" y="65" width="400" height="250" stroke-width="4" stroke="yellow" stroke-dasharray="2 2 2 2" fill="black"/>
    <rect x="50" y="50" width="400" height="250" stroke-width="4" stroke="yellow" stroke-dasharray="2 2 2 2" fill="url(#gradientDefinition)"/>
</svg>

Код практически ничем не отличается от кода для линейного градиента. В принципе единственное отличие это вместо linearGradient стоит radialGradient.


Почему-то на результате получилось что градиент куда-то уехал и видно только его край. Надо будет разобраться с этим...
Теги: