blob: 534e0dbaa8f23ee68a8d3c44b457acaad1b8cd9a [file] [log] [blame]
<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>