SVG – قسمت پنجم

در SVG – قسمت پنجم به ترسیم اشکال با SVG خاتمه میدیم و شکل های چند ضلعی رو رسم خواهیم کرذ.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

<SVG Polygon – <polygon:

ریشه کلمه polygon یونانی است و از ترکیب دو کلمه poly به معنی “چند” و gon به معنی “زاویه” است که ترکیب این دو با هم لغت “چند ضلعی” رو به ما میده. چند ضلعی ها از اتصال چند خط مستقیم ساخته و یک شکل بسته رو تشکیل میدن. ما توسط عنصر <ploygon> یک شکل گرافیکی که حداقل از سه ضلع تشکیل شده رو ایجاد میکنیم. با کد مثال زیر یک سه ضلعی ترسیم میکنیم:

 <!DOCTYPE html>
<html>
<body>
<svg height=”210″ width=”500″>
<polygon points=”200,10 250,190 160,210″ style=”fill:lime;stroke:purple;stroke-width:1″ />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

توسط صفت points مختصات نقاط  x و y برای هر گوشه چند ضلعی تعریف میکنیم. در مورد صفت fill و stroke و stroke-width هم در مقاله قبلی توضیح دادیم. همچنین در زیر یک شکل با چهار ضلع ایجاد می کنیم:

<!DOCTYPE html>
<html>
<body>
<svg height=”250″ width=”500″>
<polygon points=”220,10 300,210 170,250 123,234″ style=”fill:lime;stroke:purple;stroke-width:1″ />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

حالا میخوایم به کمک عنصر <polygon> یک ستاره ایجاد میکنیم.:

<!DOCTYPE html>
<html>
<body>
<svg height=”210″ width=”500″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″ style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;”/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

ما با تغییر fill-rule به “evenodd” خواهیم داشت:

<!DOCTYPE html>
<html>
<body>
<svg height=”210″ width=”500″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″ style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;”/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

<SVG Path – <path:

با استفاده از عنصر <path> یک مسیر تعریف میکنیم. دستورات زیر برای مسیر ها در دسترس هستند:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curve
  • A = elliptical Arc
  • Z = closepath

در کد مثال زیر یک مسیر تعریف میکنه به طوری که شروع اون در موقعیت ۱۵۰,۰ با یک خط به موقعیت ۷۵,۲۰۰ سپس از اونجا مجدد با یک خط به موقعیت ۲۲۵,۲۰۰ ترسیم میشه و در نهایتت به موقعیت ۱۵۰,۰ برگشته ومسیر رو میبنده:

<!DOCTYPE html>
<html>
<body>
<svg height=”210″ width=”400″>
<path d=”M150 0 L75 200 L225 200 Z” />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

ما میتونیم توسط منحنی های Bézier بین دو نقطه منحنی رسم کنیم. عموما کاربران از دو نقطه برای ترسیم و کنترل منحنی استفاده میکنن. quadratic Bézier curve امکان ترسیم منحنی با یک نقطه کنترل برای مارو فراهم میکنه که به مکعب معروفه. مثال زیر یک quadratic Bézier curve از نقطه A به C و با نقطه کنترل B برامون ترسیم میکنه.

<!DOCTYPE html>
<html>
<body>
<svg height=”400″ width=”450″>
<path id=”lineAB” d=”M 100 350 l 150 -300″ stroke=”red” stroke-width=”3″ fill=”none” />
<path id=”lineBC” d=”M 250 50 l 150 300″ stroke=”red” stroke-width=”3″ fill=”none” />
<path d=”M 175 111 l 150 0″ stroke=”green” stroke-width=”3″ fill=”none” />
<path d=”M 100 350 q 150 -600 300 0″ stroke=”blue” stroke-width=”5″ fill=”none” />
<!– Mark relevant points –>
<g stroke=”black” stroke-width=”3″ fill=”black”>
<circle id=”pointA” cx=”100″ cy=”350″ r=”3″ />
<circle id=”pointB” cx=”250″ cy=”50″ r=”3″ />
<circle id=”pointC” cx=”400″ cy=”350″ r=”3″ />
</g>
<!– Label the points –>
<g font-size=”30″ font-family=”sans-serif” fill=”black” stroke=”none” text-anchor=”middle”>
<text x=”100″ y=”350″ dx=”-30″>A</text>
<text x=”250″ y=”50″ dy=”-10″>B</text>
<text x=”400″ y=”350″ dx=”30″>C</text>
</g>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

به پایان ترسیم اشکال مختلف به کمک SVG ها رسیدیم. از همراهیتون کمال تشکر رو داریم.

نوشته SVG – قسمت پنجم اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.

مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses