| <!DOCTYPE html> |
| <base href="http://www.example.com/"> |
| <svg width="400" height="300"> |
| <linearGradient id="paint"> |
| <stop stop-color="green"/> |
| </linearGradient> |
| <linearGradient id="inheritedPaint" xlink:href="#paint"/> |
| <rect id="rect" width="100" height="100" fill="url(#paint) red"/> |
| <rect x="125" y="25" width="50" height="50" stroke="url(#paint) red" stroke-width="50"/> |
| <use x="200" xlink:href="#rect"/> |
| <rect x="300" width="100" height="100" fill="url(#inheritedPaint) red"/> |
| |
| <filter id="filter" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB"> |
| <feImage xlink:href="#rect"/> |
| </filter> |
| <rect y="100" width="100" height="100" fill="red" filter="url(#filter)"/> |
| |
| <clipPath id="clip"> |
| <rect y="50" width="100" height="50"/> |
| </clipPath> |
| <rect x="100" y="100" width="100" height="50" fill="green"/> |
| <g clip-path="url(#clip)" transform="translate(100, 100)"> |
| <rect width="100" height="50" fill="red"/> |
| <rect y="50" width="100" height="50" fill="green"/> |
| </g> |
| |
| <mask id="mask"> |
| <rect y="50" width="100" height="50" fill="white"/> |
| </mask> |
| <rect y="100" x="200" width="100" height="50" fill="green"/> |
| <g mask="url(#mask)" transform="translate(200, 100)"> |
| <rect width="100" height="50" fill="red"/> |
| <rect y="50" width="100" height="50" fill="green"/> |
| </g> |
| |
| <pattern id="pattern" width="100" height="100" patternUnits="userSpaceOnUse"> |
| <rect width="100" height="100" fill="green"/> |
| </pattern> |
| <pattern id="inheritedPattern" xlink:href="#pattern"/> |
| <rect x="300" y="100" width="100" height="100" fill="url(#inheritedPattern) red"/> |
| |
| <marker id="marker" refY="0.5"> |
| <rect width="1" height="1" fill="green"/> |
| </marker> |
| <polyline points="0,250 100,250 200,250" stroke="red" stroke-width="100" |
| marker-start="url(#marker)" marker-mid="url(#marker)" marker-end="url(#marker)"/> |
| |
| <radialGradient id="radial"> |
| <stop stop-color="green"/> |
| </radialGradient> |
| <radialGradient id="inheritedRadial" xlink:href="#radial"/> |
| <rect x="300" y="200" width="100" height="100" fill="url(#inheritedRadial) red"/> |
| </svg> |