transform-origin-svg-1b.svg 389 B

12345678910
  1. <svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
  2. <g transform="translate(30,30)">
  3. <!-- transform-origin specifies a point in user space with percentages
  4. resolved against the nearest viewport's dimensions.
  5. -->
  6. <rect x='10' y='10' width='100' height='100' fill='blue'
  7. style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/>
  8. </g>
  9. </svg>