Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <svg x="0" y="0" height="1000" width="1000"> <!-- podrazumevane koordinate su 0,0 , velicina moze i u procentima-->
- <rect height="150" width="255" x="50" y="80" style="fill:red; stroke:blue; stroke-width: 5; rx: 5"; opacity="0.55"></rect>
- <!--kad je samo rx, podrazumeva ry-->
- <circle r="100" cx="350" cy="350" fill="transparent" stroke="blue"/>
- <!-- transparent moze biti i none -->
- <ellipse rx="40" ry="70" cx="800" cy="800" fill="magenta" stroke="lime" stroke-width="6"></ellipse>
- <line x1="55" y1="44" x2="500" y2="120" stroke="red" stroke-width="9"/>
- <!-- moze se zatvroriti tag i ovako-->
- <polyline points="50,375 22,15 444,222 123,321 222,112" stroke="red" fill="none"></polyline>
- <!--tacke se grupisu u parovima, fill po default nije none!! -->
- <polygon points="500,555 590,888, 300,344" style="fill:silver;stroke:purple;stroke-width: 5;"></polygon>
- <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:gold;stroke: black;stroke-width: 5; fill-rule: evenodd"></polygon>
- <path d="M150 0 L75 200 L225 200 Z" fill="none" stroke=""></path>
- <!-- koristi se uglavnom za animaciju-->
- <!-- M- L-linija H-horizontalna V-vertikalna C-curve S- a- Z-zatvaranje putanje"-->
- <text x="533" y="677" fill="orange" font-size="25" font-family="Verdana" text-anchor="end"
- transform="translate(100,100) rotate(20,100,120)">
- ovo je tekst???
- <tspan x="533" y="699 ">
- drugi red teksta
- </tspan>
- </text>
- <!--ne vidi se ako se stavi 0,0 zato sto tekst ide iznad tacke!!! ako je anchor namesten na start,
- ako je anchor end onda ce se zadnje slovo zavrsiti u toj tacki-->
- <!--translate(100,100) pomera test tamo, rotate(20-stepeni pa koordinate tacke oko koje se rotira(ne mora oko tacke...)-->
- <circle r="25" cx="930" cy="880">
- <animate attributeName="cx" attributeType="XML" from="930" to="870" dur="5s" fill="remove" repeatCount="indefinite"></animate>
- </circle>
- <!--prvi nacin animacije-->
- <rect height="50" width="55" x="700" y="700" stroke="#ffDD0D" fill="ff0000">
- <animateTransform attributeName="transform" begin ="0s" dur="20s"
- type="rotate" from="0 710 710" to="360 710 710" repeatCount="indefinite"></animateTransform>
- </rect>
- <rect height="30" width="30" x="620" y="620" stroke="red" fill="black">
- <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="30" to="0"></animate>
- <animate attributeName="height"attributeType="XML" begin="0s" dur="10s" fill="freeze" from="30" to="0"></animate>
- <animate attributeName="fill" attributeType="CSS" begin="0s" dur="10s" fill="freeze" from="black" to="red"></animate>
- <animateTransform attributeName="transform" begin="0s" dur="10s" type="scale" from="1" to="1.2" repeatCount="indefinite"></animateTransform>
- </rect>
- </svg>
- </body>
- </html>
Add Comment
Please, Sign In to add comment
