pattern_transform.svg

Enable keyboard shortcuts

<svg viewBox="0 0 200 200"  xmlns="http://www.w3.org/2000/svg">

  <pattern id="pattern" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="40" height="40"

          patternTransform="rotate(45)

                      skewX(0)

                      scale(1 1)"

		  transform="rotate(33)"

		  stroke="black" line-width="4">

    <rect x="0" y="0" width="20" height="20" fill="red"/>

    <rect x="20" y="0" width="20" height="20" fill="green"/>

    <rect x="0" y="20" width="20" height="20" fill="blue"/>

    <rect x="20" y="20" width="20" height="20" fill="yellow"/>

  </pattern>

  <rect width="200" height="200" fill="url(#pattern)"/>

</svg>