SVG
Omvandling
Sök…
Anmärkningar
Grafiska element kan ändras genom att lägga till ett transformattribut .
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>
Istället för att det övre vänstra ursprunget återges vid koordinaterna (0, 0), kommer det att visas nedåt och höger, från punkt (10, 10).
Hela grupper av element kan transformeras tillsammans och transformationer kan lägga till varandra.
<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>
Först skalas varje punkt i cirkeln med faktorn 3 i förhållande till ursprunget, vilket bringar cirkelns centrum till mitten av rektangeln vid (15, 15) och dess radie till 15. Därefter rektangeln och cirkeln roteras tillsammans 45 grader medurs runt ursprunget.
Översätt
Flytta en rektangel 10 enheter till höger och 20 enheter nedåt:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>
Flytta den 0 enheter horisontellt och 20 enheter upp:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>
Flytta den 10 enheter till vänster och 0 enheter vertikalt:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>
skala
Skala en rektangel horisontellt med faktor 2 och vertikalt med faktor 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>
Resultatet motsvarar
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="5" width="80" height="20" />
</svg>
Spegla en rektangel horisontellt:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>
Skala fungerar i förhållande till ursprunget, så det motsvarar
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-20" y="0" width="20" height="40" />
</svg>
rotera
Vrid en polygon medsols 90 grader runt ursprunget:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>
Resultatet motsvarar
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,30 -20,15" />
</svg>
Rotationscentrumet kan ges uttryckligen:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>
Resultatet motsvarar
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="30,0 30,30 10,15" />
</svg>
skewX, skewY
sneda en polygon horisontellt med 45 grader:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
Resultatet motsvarar
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
x-värden beräknas som x + y * tan(angle) , y-värden förblir oförändrade
skeva en polygon vertikalt med 30 grader:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
Resultatet motsvarar (möjliggör avrundning)
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
x-värden förblir oförändrade, y-värden beräknas som y + x * tan(angle)
matris
Applicera en transformationsmatris på en polygon:
<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>
Varje punkt (x, y) transformeras genom att använda matris (a, b, c, d, e, f) så här:
┌ 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 ┘
Resultatet motsvarar
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 70,28 34,58 4,40" />
</svg>
Flera transformationer
Transformationer kan sammanlänkas och appliceras höger till vänster
Vrid en rektangel med 90 grader och flytta den sedan ned med 20 enheter och till höger med 20 enheter:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-10" y="-20" width="20" height="40"
transform="translate(20 20) rotate(90)" />
</svg>
Resultatet motsvarar
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="10" width="40" height="20" />
</svg>
