pattern-transform-template-inheritance-ref.svg

Enable keyboard shortcuts

Default Checkerboard Light Dark

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100">

  <defs>

    <pattern id="pattern-rotated" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">

      <rect width="10" height="10" fill="green"/>

    </pattern>

    <pattern id="pattern-translated" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(5 0)">

      <rect width="10" height="10" fill="green"/>

    </pattern>

  </defs>

  <rect x="10" y="10" width="80" height="80" fill="url(#pattern-rotated)"/>

  <rect x="110" y="10" width="80" height="80" fill="url(#pattern-rotated)"/>

  <rect x="210" y="10" width="80" height="80" fill="url(#pattern-rotated)"/>

  <rect x="310" y="10" width="80" height="80" fill="url(#pattern-translated)"/>

</svg>