| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <svg xmlns="http://www.w3.org/2000/svg"> |
| <title>Reference for clip-path, filter, mask and opacity applying to marker elements</title> |
| <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=874507 --> |
| <defs> |
| <clipPath id="c"> |
| <circle cx="50" cy="50" r="50"/> |
| </clipPath> |
| <filter id="f"> |
| <feColorMatrix type="saturate" values="0"/> |
| </filter> |
| <mask id="m"> |
| <circle cx="50" cy="50" r="50" fill="white"/> |
| </mask> |
| <marker id="m-clip-path" markerWidth="100" markerHeight="100" fill="green"> |
| <g clip-path="url(#c)"> |
| <rect width="100" height="100"/> |
| </g> |
| </marker> |
| <marker id="m-filter" markerWidth="100" markerHeight="100" fill="green"> |
| <g filter="url(#f)"> |
| <rect width="100" height="100"/> |
| </g> |
| </marker> |
| <marker id="m-mask" markerWidth="100" markerHeight="100" fill="green"> |
| <g mask="url(#m)"> |
| <rect width="100" height="100"/> |
| </g> |
| </marker> |
| <marker id="m-opacity" markerWidth="100" markerHeight="100" fill="green"> |
| <g opacity="0.5"> |
| <rect width="100" height="100"/> |
| </g> |
| </marker> |
| </defs> |
| |
| <line x1="10" y1="10" x2="11" y2="10" marker-start="url(#m-clip-path)"/> |
| <line x1="120" y1="10" x2="121" y2="10" marker-start="url(#m-filter)"/> |
| <line x1="230" y1="10" x2="231" y2="10" marker-start="url(#m-mask)"/> |
| <line x1="340" y1="10" x2="341" y2="10" marker-start="url(#m-opacity)"/> |
| </svg> |