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.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow