SVG
Omvandling
Sök…
Syntax
- transform = " [funktioner] * "
- late (x [, y])
- rotate (θ [, x, y])
- skala (x [, y])
- skewX (θ)
- skewY (θ)
- matris (a, b, c, d, e, f)
Tillämpa transformationer
Transformationer kan tillämpas på element genom att lägga till ett transform
:
<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>
Eller till grupper av element som ingår i <g>
-taggar:
<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>
Fler transformationer kan tillämpas på samma element genom att lägga till dem separerade med mellanslag:
<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>
Transformation funktioner
Översätt
translate
flyttgrafik längs specificerade vektorer:
<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>
Det första värdet är x-översättningen och det andra y. Om y är utelämnad, kommer den att vara 0.
Skala
scale
ändrar storlek på element efter specificerade förhållanden:
<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>
Liksom translate
är argumenten x, sedan y. I scale
, om y är utelämnad, kommer den dock att vara värdet på x; med andra ord, det skalar elementet utan att ändra bildförhållandet.
Rotera
rotate
roterar element med angivna vinklar.
<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>
Det första värdet är vinkeln, i grader. Transformationen tillämpas medsols. De andra två värdena representerar den punkt som ska roteras runt, som standard som ursprung.