<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
  <title>Bug 14157: Rotated shape has wrong gradient rendering</title>

  <linearGradient id="my_gradient" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="red" />
    <stop offset="0.5" stop-color="green" />
    <stop offset="1" stop-color="blue" />
  </linearGradient>

  <rect width="400" height="300" rx="20" ry="20" fill="url(#my_gradient)"
        transform="translate(200, 150) scale(0.3) rotate(45) translate(-200, -150)" />

  <radialGradient id="my_gradient2" cx="0.5" cy="0.5" r="1">
    <stop offset="0" stop-color="red" />
    <stop offset="0.5" stop-color="green" />
    <stop offset="1" stop-color="blue" />
  </radialGradient>

  <rect r="400" x="0" y="0" width="400" height="300" fill="url(#my_gradient2)" transform="translate(20, 150) scale(0.3) skewX(15) translate(-20, -150)"/>
</svg>