bounding of transformed images using overflow hidden

example showing how a transformed svg can be contained

by Andrew Holloway

HTML

<div class="container">
  <svg>
  <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
  </svg>
</div>

CSS

.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  overflow: hidden;
}

.container svg {
  transform: translateX(400px);
  /* position: absolute; */
  /* left: 400px; */
}