8/5. feladat megoldása

skewx(30)


<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200" viewBox="-100 -100 200 200">

<rect transform="skewX(30)" x="-40" y="-40" width="80" height="80"
    style="fill: blue; stroke: black; stroke-width: 2; fill-opacity: 0.4;"/>

</svg>

skewy(-30)


<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200" viewBox="-100 -100 200 200">

<rect transform="skewY(-30)" x="-40" y="-40" width="80" height="80"
    style="fill: blue; stroke: black; stroke-width: 2; fill-opacity: 0.4;"/>

</svg>

skewx(30) skewy(30)


<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200" viewBox="-100 -100 200 200">

<rect transform="skewX(30) skewY(30)" x="-40" y="-40" width="80" height="80"
    style="fill: blue; stroke: black; stroke-width: 2; fill-opacity: 0.4;"/>

</svg>

skewx(30) skewy(-30)


<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200" viewBox="-100 -100 200 200">

<rect transform="skewX(30) skewY(-30)" x="-40" y="-40" width="80" height="80"
    style="fill: blue; stroke: black; stroke-width: 2; fill-opacity: 0.4;"/>

</svg>