clip-path-svg-text-css.html (675B)
1 <!doctype html> 2 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#ClipPathElement"> 3 <link rel="match" href="reference/clip-path-svg-text-css-ref.html"> 4 <meta name="fuzzy" content="0-1;0-200"> 5 <meta name="flags" content="ahem"> 6 <link rel="stylesheet" href="/fonts/ahem.css" /> 7 <style> 8 text { 9 font: 50px/1 Ahem; 10 text-shadow: grey 10px 10px; 11 fill: none; 12 stroke: red; 13 stroke-width: 10px; 14 } 15 </style> 16 <svg> 17 <defs> 18 <!-- clipPath works on raw geometry regardless of fill/stroke/shadow etc --> 19 <clipPath id="c"> 20 <text x="30" y="50">Hello</text> 21 </clipPath> 22 </defs> 23 <rect width="200" height="100" fill="green" clip-path="url(#c)"/> 24 </svg>