SVG/SVG RECT

SVG ფიგურები

SVG-ს გააჩნია ზოგიერთი განსახვავებული ფიგურა, რომლის გამოყენება და მანიპულირება შესაძლებელია შემქმნელების მიერ :

• მართკუთხედი <rect>;
• წრე <circle>;
• ელიფსი <ellipse>;
• ხაზი <line>;
• ტეხილი ხაზი <polyline>;
• პოლიგონი <polygon>;
• ბილიკი <path>.

<RECT> ტეგი

<rect> ტეგი გამოიყენება მართკუთხედის და მართკუთხედის მაგვარი ფიგურების შესაქმნელად.
იმისათვის რომ გაუგოთ სამუშაოს, დააკოპირეთ მიმდინარე კოდი Notepad-ში და დაამახსოვრეთ ფაილი, როგორც "rect1.svg". განათავსეთ ფაილი თქვენს ბრაუზერის დირექტორიაში :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

კოდის ახსნა :

• Rect ელემენტის width და height ატრიბუტები განისაზღვრებიან მართკუთხედის სიგრძე და სიგანეში.
• Style ატრიბუტი გამოიყენება CSS თვისებების განსაზღვრისთვის.
• CSS fill თვისება განსაზღვრავს მართკუთხედის ფერს.
• CSS stroke-width თვისება განსაზღვრავს მართკუთხედის საზღვრის ზომას.
• CSS stroke თვისება განსაზღვრავს მართკუთხედის საზღვრის ფერს.

იხილეთ მაგალითი
განიხილეთ სხვა მაგალითი, რომელიც შეიცავს რამოდენიმე ახალ ატრიბუტს :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

კოდის ახსნა :

• X ატრიბუტი განსაზღვრავს მართკუთხედის მარცხენა პოზიციას.
• Y ატრიბუტი განსაზღვრავს მართკუთხედის მარჯვენა პოზიციას.
• CSS fill-opacity თვისება განსაზღვრავს ფერის გამჭირვალეობას.
• CSS stroke-opacity განსაზღვრავს შტრიხების ფერის გამჭირვალეობას.

იხილეთ მაგალითი
მთლიანი ელემენტის გამჭირვალეობის განსაზღვრა :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

კოდის ახსნა :

• CSS opacity თვისება განსაზღვრავს მთლიანი ელემენტის გამჭირვალეობას.

იხილეთ მაგალითი
ბოლო მაგალითი, მომრგვალებული კუთხეების მქონე მართხკუთხედის შექმნა :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

კოდის ახსნა :

• rx და ry ატრტიბუტები განსაზღვრავენ მართკუთხედის კუთხეების მომრგვალებას.

იხილეთ მაგალითი