| <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"> |
| |
| <defs> |
| <!-- tests if WebKit uses the percentage values, if gradientUnits is userSpaceOnUse--> |
| <linearGradient id="gradient1" x1="0%" y1="0%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse"> |
| <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> |
| <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> |
| </linearGradient> |
| <linearGradient id="gradient2" x1="0" y1="0" x2="150" y2="0" gradientUnits="userSpaceOnUse"> |
| <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> |
| <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> |
| </linearGradient> |
| <radialGradient id="gradient3" cx="50%" cy="66%" r="80%" gradientUnits="userSpaceOnUse"> |
| <stop offset="0%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> |
| <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> |
| </radialGradient> |
| </defs> |
| |
| <rect x="0" y="0" width="300" height="50" fill="url(#gradient1)"/> |
| <rect x="0" y="50" width="300" height="50" fill="url(#gradient2)"/> |
| <rect x="0" y="100" width="300" height="300" fill="url(#gradient3)"/> |
| </svg> |
| |
