SVG 变换

translate

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 0)" />
</svg>

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
</svg>

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 50)" />
</svg>

scale

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="50" cy="25" r="20" fill="red" transform="scale(2)" />
</svg>

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="70" cy="25" r="20" fill="red" transform="scale(1,2)" />
</svg>

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="50" cy="25" r="20" fill="red" transform="scale(2,1)" />
</svg>

rotate

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)" />
</svg>

skewX

<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(10)" />
</svg>

<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(30)" />
</svg>

skewY

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(10)" />
</svg>

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(30)" />
</svg>