SVG <rect>

شکل‌های SVG

SVG دارای عناصر شکل پیش‌تعریف شده‌ای برای استفاده توسعه‌دهندگان است:

• مستطیل <rect>
• دایره <circle>
• مستطیل بیضوی <ellipse>
• خط مستقیم <line>
• خطوط خمیده <polyline>
• مکعب متعدد ضلعی <polygon>
• مسیر <path>

فصل‌های آینده از روی عنصر rect آغاز می‌شود و به توضیح هر عنصر می‌پردازد.

مستطیل SVG - <rect>

مثال 1

<rect> عنصر برای ایجاد مستطیل‌ها و اشکال مشابه مستطیل استفاده می‌شود:

این کد SVG است:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

آزمایش کنید

توضیح کد:

• خصوصیات width و height عناصر <rect> ارتفاع و عرض مستطیل را تعریف می‌کنند
• خصوصیت style برای تعریف خصوصیات CSS مستطیل استفاده می‌شود
• خصوصیت fill CSS رنگ پر کردن مستطیل را تعریف می‌کند
• خصوصیت border-width CSS پهنای لبه مستطیل را تعریف می‌کند
• خصوصیت stroke CSS رنگ لبه مستطیل را تعریف می‌کند

مثال 2

بگذارید به مثالی دیگر با خصوصیات جدید نگاه کنیم:

این کد SVG است:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

آزمایش کنید

توضیح کد:

• خصوصیت x تعریف می‌کند موقعیت چپ مستطیل (مثلاً x="50" مستطیل را در 50 پیکسلی از حاشیه چپ قرار می‌دهد)
• خصوصیت y تعریف می‌کند موقعیت بالا مستطیل (مثلاً y="20" مستطیل را در 20 پیکسلی از حاشیه بالا قرار می‌دهد)
• خصوصیت fill-opacity CSS تعریف می‌کند میزان شفافیت رنگ پر کردن (محدوده قانونی: 0 تا 1)
• خصوصیت border-opacity CSS تعریف می‌کند میزان شفافیت رنگ لبه‌ها (محدوده قانونی: 0 تا 1)

مثال 3

تعریف میزان شفافیت یک عنصر:

این کد SVG است:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

آزمایش کنید

توضیح کد:

• خصوصیت opacity CSS تعریف می‌کند میزان شفافیت یک عنصر (محدوده قانونی: 0 تا 1)

مثال 4

مثال آخر، ایجاد مستطیل‌های دارای گوشه‌های گرد:

این کد SVG است:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

آزمایش کنید

توضیح کد:

• ویژگی‌های rx و ry باعث گردش گوشه‌های مستطیل می‌شوند