| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>filter primitive subregion: Clip to filter primitive subregion</title> |
| <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> |
| <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterPrimitiveSubRegion"> |
| <link rel="match" href="filter-subregion-01-ref.html"> |
| <p>Test passes if two semi-transparent green rectangles are on top of the |
| blue boxes to the left, and one opaque green rectangle on the blue box |
| to the right.</p> |
| <!-- this is example filtersubregion00.svg from the specification --> |
| <svg width="400" height="400"> |
| <defs> |
| <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox"> |
| <feFlood x="25%" y="25%" width="50%" height="50%" |
| flood-color="green" flood-opacity="0.75"/> |
| </filter> |
| <filter id="blend" primitiveUnits="objectBoundingBox"> |
| <feBlend x="25%" y="25%" width="50%" height="50%" |
| in2="SourceGraphic" mode="multiply"/> |
| </filter> |
| <filter id="merge" primitiveUnits="objectBoundingBox"> |
| <feMerge x="25%" y="25%" width="50%" height="50%"> |
| <feMergeNode in="SourceGraphic"/> |
| <feMergeNode in="FillPaint"/> |
| </feMerge> |
| </filter> |
| </defs> |
| |
| <g fill="none" stroke="blue" stroke-width="4"> |
| <rect width="200" height="200"/> |
| <line x2="200" y2="200"/> |
| <line x1="200" y2="200"/> |
| </g> |
| <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/> |
| |
| <g transform="translate(200 0)"> |
| <g fill="none" stroke="blue" stroke-width="4"> |
| <rect width="200" height="200"/> |
| <line x2="200" y2="200"/> |
| <line x1="200" y2="200"/> |
| </g> |
| <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/> |
| </g> |
| |
| <g transform="translate(0 200)"> |
| <g fill="none" stroke="blue" stroke-width="4"> |
| <rect width="200" height="200"/> |
| <line x2="200" y2="200"/> |
| <line x1="200" y2="200"/> |
| </g> |
| <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/> |
| </g> |
| </svg> |
