| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: color-filter reference</title> |
| <link rel="author" title="Apple" href="http://www.apple.com/"> |
| |
| <style> |
| body { |
| margin: 0; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <svg viewBox="0 0 800 600" style="width: 800px; height: 600px"> |
| <defs> |
| <radialGradient id="grad"> |
| <stop offset="0" stop-color="cyan" /> |
| <stop offset="0.5" stop-color="green" /> |
| <stop offset="0.75" stop-color="blue" /> |
| </radialGradient> |
| |
| <filter id="flood" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> |
| <feFlood flood-color="green" /> |
| </filter> |
| |
| <filter id="diffuse-light" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> |
| <feDiffuseLighting lighting-color="green"> |
| <feDistantLight azimuth="100" elevation="100"/> |
| </feDiffuseLighting> |
| </filter> |
| |
| <filter id="specular-light" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> |
| <feSpecularLighting surfaceScale="2" specularExponent="2" specularConstant="2" lighting-color="green"> |
| <fePointLight x="20" y="20" z="2"/> |
| </feSpecularLighting> |
| </filter> |
| |
| <filter id="shadow" x="0" y="0" width="160%" height="160%"> |
| <feDropShadow dx="50" dy="50" stdDeviation="0" flood-color="green" flood-opacity="1" /> |
| </filter> |
| |
| <pattern id="pattern" patternUnits="userSpaceOnUse" x="20" y="0" width="50" height="50"> |
| <rect x="5" y="5" width="30" height="30" fill="green"/> |
| </pattern> |
| </defs> |
| |
| <rect x="20" y="10" width="150" height="150" fill="url(#grad)" /> |
| |
| <rect x="200" y="10" width="150" height="150" fill="green" /> |
| <rect x="400" y="10" width="150" height="150" fill="green" stroke="blue" stroke-width="15" /> |
| |
| <rect x="20" y="200" width="150" height="150" filter="url(#flood)"/> |
| <rect x="200" y="200" width="150" height="150" filter="url(#diffuse-light)"/> |
| <rect x="400" y="200" width="150" height="150" filter="url(#specular-light)"/> |
| |
| <rect x="20" y="400" width="150" height="150" fill="url(#pattern)"/> |
| |
| <rect x="200" y="400" width="100" height="100" fill="blue" filter="url(#shadow)"/> |
| </svg> |
| |
| </body> |
| </html> |
