SVG
transformatie
Zoeken…
Opmerkingen
Grafische elementen kunnen worden gewijzigd door een transformattribuut toe te voegen.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>
In plaats van dat de oorsprong linksboven op coördinaten (0, 0) wordt weergegeven, wordt deze vanaf punt (10, 10) naar beneden en rechts weergegeven.
Hele groepen elementen kunnen samen worden getransformeerd en transformaties kunnen aan elkaar worden toegevoegd.
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(45)">
<rect x="0" y="0" width="30" height="30" />
<circle cx="5" cy="5" r="5" transform="scale(3)" />
</g>
</svg>
Eerst wordt elk punt van de cirkel geschaald met de factor 3 ten opzichte van de oorsprong, waardoor het middelpunt van de cirkel naar het midden van de rechthoek op (15, 15) en zijn straal tot 15 wordt gebracht. Vervolgens worden de rechthoek en de cirkel wordt samen 45 graden rechtsom rond de oorsprong gedraaid.
vertalen
Verplaats een rechthoek 10 eenheden naar rechts en 20 eenheden omlaag:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>
Verplaats het 0 eenheden horizontaal en 20 eenheden omhoog:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>
Verplaats het 10 eenheden naar links en 0 eenheden verticaal:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>
schaal
Schaal een rechthoek horizontaal met factor 2 en verticaal met factor 0.5:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>
Het resultaat is gelijk aan
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="5" width="80" height="20" />
</svg>
Spiegel een rechthoek horizontaal:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>
Schaal werkt wel in relatie tot de oorsprong, dus dit is gelijk aan
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-20" y="0" width="20" height="40" />
</svg>
draaien
Draai een polygoon 90 graden rechtsom rond de oorsprong:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>
Het resultaat is gelijk aan
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,30 -20,15" />
</svg>
Het rotatiecentrum kan expliciet worden vermeld:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>
Het resultaat is gelijk aan
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="30,0 30,30 10,15" />
</svg>
skewX, skewY
schuin een polygoon horizontaal met 45 graden:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
Het resultaat is gelijk aan
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
x-waarden worden berekend als x + y * tan(angle) , y-waarden blijven ongewijzigd
een veelhoek verticaal 30 graden scheeftrekken:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
Het resultaat is gelijk aan (afronding mogelijk maken)
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
x waarden blijven ongewijzigd, y waarden worden berekend als y + x * tan(angle)
Matrix
Pas een transformatiematrix toe op een polygoon:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>
Elk punt (x, y) wordt getransformeerd door matrix (a, b, c, d, e, f) als volgt toe te passen:
┌ x_new ┐ ┌ a c e ┐ * ┌ x_old ┐ ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ = └ b d f ┘ │ y_old │ = └ x_old * b + y_old * d + f ┘
└ 1 ┘
Het resultaat is gelijk aan
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 70,28 34,58 4,40" />
</svg>
Meerdere transformaties
Transformaties kunnen worden samengevoegd en van rechts naar links worden toegepast
Draai een rechthoek 90 graden en verplaats deze vervolgens 20 eenheden naar beneden en 20 eenheden naar rechts:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-10" y="-20" width="20" height="40"
transform="translate(20 20) rotate(90)" />
</svg>
Het resultaat is gelijk aan
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="10" width="40" height="20" />
</svg>