SVG/SVG RECT

ვიკიწიგნებიდან
< SVG
გადასვლა: ნავიგაცია, ძიება

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 ატრტიბუტები განსაზღვრავენ მართკუთხედის კუთხეების მომრგვალებას.

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

მოძიებულია „https://ka.wikibooks.org/w/index.php?title=SVG/SVG_RECT&oldid=6387“-დან