EXPLORER VML ovál, négyszög, rádiusz 020
"oval" -------------------"rect"------------------- "roundrect"
A gyakorlati példákhoz, a következő programot alkalmazzuk.
A kék színnel jelölt xxxx helyre, a következő három meghatározás közül választott szöveget írjuk be:
- oval Kört, vagy oválist akarunk megjeleníteni
- rect Derékszögű négyszöget akarunk megjeleníteni
- roundrect Rádiuszos négyszöget akarunk megjeleníteni
<html>
<head>
<title> EXPLORER VML oval, rect, roundrect </title>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style> <!-- v\: * { behavior:url(#default#VML);display:inline-block } --> </style>
<link href="elérési_út.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="rajzlap" style="width:160px; height: 160px;">
<div class="pxracs" style="width:160px; height: 160px;">
<v:group style="position: absolute; width: 160px; height: 160px; margin-left:0px; margin-top: 0px;" coordsize="160,160">
<v:xxxx style='position:absolute;left:0;top:0;width:140;height:140;' fillcolor="aqua" strokecolor="black" strokeweight="1px">
</v:xxxx>
</v:group>
</div>
</div>
</body>
</html>
Kör vagy ovális megjelenítése ( oval )
<v:oval
style='position:absolute;
left:0; top:0;
width:140; height:140;
|
<v:oval
style='position:absolute;
left:0; top:0;
width:140; height:100;
|
<v:oval
style='position:absolute;
left:0; top:0;
width:100; height:140;
|
<v:oval
style='position:absolute;
left:0; top:0;
width:80; height:80;
|
<v:oval style="width: 140px; height: 140px">
<v:stroke weight="3px" color="yellow"/>
<v:fill type="gradient" color="white" color2="#00eeff" angle="225deg"/>
</v:oval>
|
<v:oval style="width: 140px; height: 140px">
<v:stroke weight="3px" color="yellow"/>
<v:fill type="gradient" color="white" color2="#00eeff" angle="225deg"/>
<p> </p> <p>Vekker <br /> Gyártó: Janes</p>
</v:oval>
<v:line from="70,70" to="20,70" strokeweight="4px" strokecolor="red">
</v:line>
<v:line from="70,70" to="70,0" strokeweight="4px" strokecolor="blue">
</v:line>
<v:line from="70,70" to="110,20" strokeweight="1px" strokecolor="black">
</v:line>
|
Derékszögű négyszögek "rect" és elforgatás "rotation"
<v:group style="position: absolute; width: 100px; height: 100px; margin-left:30px; margin-top: 30px;" coordsize="100,100">
<v:rect .............>
<v:fill ................ />
</v:rect>
</v:group>
<v:rect style='position:absolute;
left:0; top:0; width:100;height:100;'
fillcolor="aqua" strokecolor="black" strokeweight="1px">
<v:fill type="gradient" color="white" color2="red" angle="225deg"/>
</v:rect>
|
<v:rect style='position:absolute;
left:0;top:0;width:100;height:100;'
fillcolor="aqua" strokecolor="black" strokeweight="1px">
<v:fill type="gradient" color="white" color2="red" angle="125deg"/>
</v:rect>
|
<v:group style="rotation =45; position: absolute; width: 100px; height: 100px; margin-left:30px; margin-top: 30px;" coordsize="100,100">
<v:rect style="position:absolute;
left:0;top:0;width:100;height:100;"
fillcolor="aqua" strokecolor="black" strokeweight="1px">
<v:fill type="gradient" color="yellow" color2="red" angle="125deg"/>
</v:rect>
|
<v:rect style="position:absolute;
left:0;top:0;width:100;height:50;"
fillcolor="aqua" strokecolor="black" strokeweight="1px">
|
<v:rect style="position:absolute;
left:0;top:0;width:50;height:100;"
fillcolor="aqua" strokecolor="black" strokeweight="1px">
|
<v:group style="rotation =45; position: absolute; width: 100px; height: 100px; margin-left:30px; margin-top: 30px;" coordsize="100,100">
<v:rect style="position:absolute;
left:0;top:0;width:50;height:100;"
fillcolor="aqua" strokecolor="black" strokeweight="1px">
|
Négyszög sarkainak rádiuszos megjelenítése ( roundrect )
rádiusz mérete: arcsize="0. ..."
Ha értéket is rendelünk hozzá, az érték egynél kisebb, és tizedes érték legyen. Például: 0.2, --- 0.25 vagy 0,3 stb.
<v:group style="position: absolute; width: 160px; height: 160px; margin-left:0px; margin-top: 0px;" coordsize="160,160">
<v:roundrect ............. />
</v:group>
<v:roundrect
style='position:absolute;
left:0; top:0;
width:140; height:140;
|
<v:roundrect
style='position:absolute;
left:0; top:0;
width:140; height:100;
|
<v:roundrect
style='position:absolute;
left:0; top:0;
width:100; height:140;
|
<v:roundrect
style='position:absolute;
left:0; top:0;
width:80; height:80;
|
<v:roundrect arcsize="0.3"
style='position:absolute;
left:0; top:0;
width:140; height:140;
|
<v:roundrect arcsize="0.25"
style='position:absolute;
left:0; top:0;
width:140; height:140;
|
<v:roundrect arcsize="1.0"
style='position:absolute;
left:0; top:0;
width:140; height:140;
|
<v:roundrect arcsize="4.2"
style='position:absolute;
left:0; top:0;
width:140; height:140;
|
Kettős háttérszín "gradient" és szín elforgatás "angle"
<v:group style="position: absolute; width: 100px; height: 100px; margin-left:30px; margin-top: 30px;" coordsize="100,100">
<v:roundrect .............>
<v:fill type="gradient" color="white" color2="red" angle="225deg" />
</v:roundrect>
</v:group>
<v:roundrect style='position:absolute;
left:0;top:0;width:100;height:100;'
fillcolor="aqua" strokecolor="black" strokeweight="1px">
<v:fill type="gradient" color="white" color2="red" angle="225deg"/>
</v:roundrect>
|
<v:roundrect style='position:absolute;
left:0;top:0;width:100;height:100;'
fillcolor="aqua" strokecolor="black" strokeweight="1px">>
<v:fill type="gradient" color="white" color2="red" angle="125deg"/>
</v:roundrect>
|
<v:group style="rotation=45; position: absolute; width: 100px; height: 100px; margin-left:30px; margin-top: 30px;" coordsize="100,100">
<v:roundrect style='position:absolute;
left:0;top:0;width:100;height:100;'
fillcolor="aqua" strokecolor="black" strokeweight="1px">
<v:fill type="gradient" color="yellow" color2="red" angle="25deg"/>
</v:roundrect>
|
Vissza a lap elejére
