title: SVG mapping on a transformed container
body: <p>im looking for a solution for the following case.</p>
  
  <p>I'm trying to map a whole svg image on a transformed container (most possibly also a svg).</p>
  
  <p><a href="https://i.stack.imgur.com/G4RuQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4RuQ.jpg" alt="enter image description here"></a></p>
  
  <p>The origin image (blue) should connect all 4 edges to the corresponding opposite one. And I'm also wondering, if it would be possible to stretch the content of the original svg like its parents container.</p>
  
  <p>I searched the web for hours now and all I found where examples using "transform="SkewX(x)", which is not what im looking for.</p>
  
  <p>In the end it should function like a slider to change the content. If this is not possible, a fade would also work. But still - id like to do it with SVG, so it is lightweight.</p>
  
  <p>Maybe somebody has a clue, or maybe a hint, where to find answers :)</p>
  
  <p>Greetings</p>
  
  <p>Phil</p>