<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <linearGradient id="gradient1">
        <stop offset="0" stop-color="red"/>
        <stop offset="1" stop-color="green"/>
    </linearGradient>

    <radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="9">
        <stop offset="0" stop-color="red" />
        <stop offset="1" stop-color="red" stop-opacity="0" />
    </radialGradient>
</defs>

<!-- Gradients with objectBoundingBox units can't be applied to 1d objects -->
<line x1="20" x2="220" y1="50" y2="50" stroke="url(#gradient1) #0f0" stroke-width="20"/>

<!-- Gradients with userSpaceOnUse units can be applied to 1d objects -->
<g transform="translate(120, 100)">
    <line x1="-9" y1="0" x2="9" y2="0" stroke="url(#gradient2)" />
    <line x1="0" y1="-9" x2="0" y2="9" stroke="url(#gradient2)" />
    <line x1="-9" y1="0" x2="9" y2="0" stroke="url(#gradient2)" transform="rotate(45)" />
    <line x1="-9" y1="0" x2="9" y2="0" stroke="url(#gradient2)" transform="rotate(-45)" />
</g>

<text x="140" y="150" text-anchor="middle">You should see a green line, and a red star</text>
</svg>