<svg height="100px" width="100px" viewBox="0 0 1000 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
  <metadata>
    <h:title>pattern on text elements</h:title>
    <h:link rel="help" href="https://www.w3.org/TR/SVG2/pservers.html#Patterns"/>
    <h:link rel="match" href="reference/green-100x100.svg"/>
    <h:link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
  </metadata>
  <defs>
    <pattern id="green" width="10%" height="10%" patternUnits="userSpaceOnUse">
      <rect width="8%" height="8%" fill="green"/>
    </pattern>
    <pattern id="red" width="10%" height="10%" patternUnits="userSpaceOnUse">
      <rect x="0.5%" y="0.5%" width="7%" height="7%" fill="red"/>
    </pattern>
  </defs>
  <rect fill="green" width="1000" height="300"/>

  <!-- the text should be covered by the rect that follows -->
  <text fill="url(#red)" font-family="Ahem" font-size="100px" x="50" y="150">XXXXXXXX</text>
  <rect fill="url(#green)" width="1000" height="300"/>
</svg>