pattern-text-01.svg

mozilla-central/testing/web-platform/tests/svg/pservers/reftests/pattern-text-01.svg

Enable keyboard shortcuts

Source code

File a bug in Core :: SVG

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /svg/pservers/reftests/pattern-text-01.svg - WPT Dashboard Interop Dashboard

SVG Preview (Scaled)

Checkerboard

Preview of https://hg.mozilla.org/mozilla-central/raw-file/tip/testing/web-platform/tests/svg/pservers/reftests/pattern-text-01.svg

<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>