| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="500"> |
| <defs> |
| <filter id="Erode-1"> |
| <feMorphology operator="erode" in="SourceGraphic" radius="-1" /> |
| </filter> |
| <filter id="Erode0"> |
| <feMorphology operator="erode" in="SourceGraphic" radius="0" /> |
| </filter> |
| <filter id="Erode10"> |
| <feMorphology operator="erode" in="SourceGraphic" radius="10" /> |
| </filter> |
| <filter id="Dilate-1"> |
| <feMorphology operator="dilate" in="SourceGraphic" radius="-1" /> |
| </filter> |
| <filter id="Dilate0"> |
| <feMorphology operator="dilate" in="SourceGraphic" radius="0" /> |
| </filter> |
| <filter id="Dilate10"> |
| <feMorphology operator="dilate" in="SourceGraphic" radius="10" /> |
| </filter> |
| </defs> |
| <g stroke="black" stroke-width="10"> |
| <rect x= "10" y="10" width="100" height="100" fill="lime"/> |
| <rect x="10" y="130" width="100" height="100" fill="lime"/> |
| |
| <!-- negative radius case --> |
| <g> |
| <rect x="140" y="10" width="100" height="100" fill="lime"/> |
| <rect x="140" y="10" width="100" height="100" fill="red" filter="url(#Erode-1)"/> |
| </g> |
| |
| <g> |
| <rect x="140" y="130" width="100" height="100" fill="lime"/> |
| <rect x="140" y="130" width="100" height="100" fill="red" filter="url(#Dilate-1)"/> |
| </g> |
| |
| <!-- zero radius case --> |
| <rect x= "270" y="10" width="100" height="100" fill="lime" filter="url(#Erode0)"/> |
| <rect x="270" y="130" width="100" height="100" fill="lime" filter="url(#Dilate0)"/> |
| </g> |
| |
| <!-- positive radius case but scaled down to less than 1 (treated as zero radius case) --> |
| <svg x="400" y="10" width="100" height="100" viewBox="0 0 10000 10000"> |
| <g stroke="black" stroke-width="1000"> |
| <rect width="100%" height="100%" fill="lime" filter="url(#Erode10)"/> |
| </g> |
| </svg> |
| <svg x="400" y="130" width="100" height="100" viewBox="0 0 10000 10000"> |
| <g stroke="black" stroke-width="1000"> |
| <rect width="100%" height="100%" fill="lime" filter="url(#Dilate10)"/> |
| </g> |
| </svg> |
| |
| <!-- positive radius case but inside a nested svg --> |
| <svg x="530" y="10" width="100" height="100"> |
| <g stroke="black" stroke-width="10"> |
| <rect width="100%" height="100%" fill="lime" filter="url(#Erode10)"/> |
| </g> |
| </svg> |
| <svg x="530" y="130" width="100" height="100" viewBox="0 0 100 100"> |
| <g stroke="black" stroke-width="10"> |
| <rect width="100%" height="100%" fill="lime" filter="url(#Dilate10)"/> |
| </g> |
| </svg> |
| |
| <!-- positive radius case --> |
| <g stroke="black" stroke-width="10"> |
| <rect x="660" y="10" width="100" height="100" fill="lime" filter="url(#Erode10)"/> |
| <rect x="660" y="130" width="100" height="100" fill="lime" filter="url(#Dilate10)"/> |
| </g> |
| </svg> |