SVG <rect>

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

شکل‌های SVG

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

  • مستطیل <rect>
  • oval
  • ellipse
  • خط <line>
  • خط چین <polyline>
  • مستطیل چندگوشه <polygon>
  • مسیر <path>

در بخش‌های بعدی، این عناصر را برای شما توضیح خواهیم داد، ابتدا از عنصر مستطیل شروع می‌کنیم.

برچسب <rect>

برچسب <rect> برای ایجاد مستطیل و انواع آن استفاده می‌شود.

برای درک نحوه عملکرد آن، این کد را به یک یادداشت‌نویس کپی کنید و آن را به عنوان فایل "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>

توضیح کد:

  • ویژگی width و height عنصر rect برای تعریف ارتفاع و عرض مستطیل استفاده می‌شوند
  • ویژگی style برای تعریف ویژگی‌های CSS استفاده می‌شود
  • ویژگی fill CSS رنگ پرکننده مستطیل را تعریف می‌کند (ارزش‌های rgb، نام رنگ یا عدد شانسی)
  • ویژگی stroke-width CSS عرض لبه مستطیل را تعریف می‌کند
  • ویژگی stroke CSS رنگ لبه مستطیل را تعریف می‌کند

این مثال را مشاهده کنید

بیایید به مثالی دیگر با ویژگی‌های جدید نگاهی بیندازیم:

<?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 مکان چپ مستطیل را تعریف می‌کند (مثلاً x="0" به معنای آن است که فاصله مستطیل تا چپ پنجره مرورگر 0px است)
  • ویژگی y مکان بالای مستطیل را تعریف می‌کند (مثلاً y="0" به معنای آن است که فاصله مستطیل تا بالای پنجره مرورگر 0px است)
  • ویژگی fill-opacity CSS شفافیت رنگ پرکننده را تعریف می‌کند (دامنه مجاز: 0 - 1)
  • ویژگی stroke-opacity CSS شفافیت رنگ خط را تعریف می‌کند (دامنه مجاز: 0 - 1)

مثال را مشاهده کنید

برای تعریف شفافیت کل عنصر:

<?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>

توضیح کد:

ویژگی opacity در CSS مقدار شفافیت کامل عنصر را تعریف می‌کند (دامنه مجاز: 0 - 1)

مثال را مشاهده کنید

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

<?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 باعث ایجاد گوشه‌های گرد در مستطیل می‌شوند.

مثال را مشاهده کنید