اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › HTML5 › تگ SVG در HTML

تگ SVG در HTML

HTML <svg> Tag

عناصر مرتبط:
<img>  <map>  <canvas>

بطور کلی تگ <svg> در HTML به منظور رسم تصاویر گرافیکی دو بعدی بکار می رود.

بیشتر مرورگرهای موجود همانطور که توانایی نمایش عکس با فرمت های مختلف را دارند، می توانند تصاویر SVG را نیز نمایش دهند. در مرورگر Internet Explorer شاید نیاز به نصب Adobe SVG Viewer باشد. انواع عنصر SVG برای ترسیم اشکال مختلف عبارتند از:

  • SVG
  • SVG Circle
  • SVG Rectangle
  • SVG Line
  • SVG Ellispe
  • SVG Polygon
  • SVG Polyline
  • SVG LinearGradients

SVG

تگ <svg> یک دربرگیرنده (container) است که محدوده دید (viewport) و مختصات مختص به خود را تولید می کند. این عنصر، والد تمام عناصر دیگر SVG برای ساخت اشکال هندسی و خطوط می باشد. همینطور می توان از آن برای ساخت عناصر تودر توی SVG استفاده کرد.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      h2 {
        direction: rtl;
      }
      svg {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <h2 align="center">ترسیم شکل با SVG</h2>
    <svg height="100"
      viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
      <rect cx="50" cy="50" width="150" height="100" rx="10" />
      <svg viewBox="0 0 10 10" x="200" width="100">
        <circle cx="5" cy="5" r="4" />
      </svg>
    </svg>
  </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

صفت ها (Attributes)

height

ارتفاع عنصر SVG را که به عنوان یک نگهدارنده را مشخص می کند.

viewBox

محدوده فضایی که عنصر SVG در آن نمایش داده می شود را مشخص می کند.

width

عرض محدوده دید عنصر SVG مشخص می کند.

SVG Circle

تگ <circle> از مجموعه تگ های زیر مجموعه <svg> برای رسم دایره بکار می رود.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #svgelem {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <h2>ترسیم دایره با SVG</h2>
    <svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
      <circle id="redcircle" cx="150" cy="50" r="50" fill="red" />
    </svg>
  </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

نکته: در مثال بالا، مستطیل خاکستری همان عنصر <svg> است که به عنوان در برگیرندۀ (container) تگ <circle> برای رسم دایره عمل می کند.

صفت ها (Attributes)

cx

موقعیت مرکز دایره را در محور افقی (X) تعیین می کند.

cy

موقعیت مرکز دایره را درُ محور عمودی (Y) تعیین می کند.

r

شعاع دایره را تعیین می کند. اگر مقدار آن برابر با 0 باشد، شکلی ترسیم نخواهد شد.

SVG Rectangle

تگ <rect> از مجموعه تگ های زیر مجموعه <svg> و برای رسم چهارضلعی بکار می رود.

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      h2 {
        direction: rtl;
        text-align: center;
      }
      #svgelem {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <h2 align="center">رسم مستطیل با SVG</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <rect id="redrect" width="300" height="100" fill="dodgerblue" />
    </svg>
  </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

صفت ها (َAttributes)

x

موقعیت چهارضلعی را در محور افقی (X) تعیین می کند.

y

موقعیت چهارضلعی را در محور عمودی (Y) تعیین می کند.

width

عرض چهارضلعی را مشخص می کند.

height

ارتفاع چهارضلعی را مشخص می کند.

rx

میزان گردی قسمت افقی گوشه های چهار ضلعی را تعیین می کند.

ry

میزان گردی قسمت عمودی گوشه های چهار ضلعی را تعیین می کند.

SVG Line

تگ <line> از مجموعه تگ های زیر مجموعه <svg> و برای رسم خط بکار می رود.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      h2 {
        direction: rtl;
      }
      #svgelem {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <h2 align="center">ترسیم خط با SVG</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="0" x2="200" y2="100" style="stroke:violet;stroke-width:2"/>
    </svg>
  </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

صفت ها (Attributes)

x1

موقعیت نقطه آغازین خط را در محور افقی (X) تعیین می کند.

x2

موقعیت نقطه آغازین خط را در محور عمودی (Y) تعیین می کند.

y1

موقعیت نقطه پایانی خط را در محور افقی (X) تعیین می کند.

y2

موقعیت نقطه پایانی خط را در محور عمودی (Y) تعیین می کند.

SVG Ellipse

تگ <ellipse> از مجموعه تگ های زیر مجموعه <svg> و برای رسم بیضی بکار می رود.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8" />
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            transform: translateX(-40%);
         }
      </style>
   </head>
   <body>
      <h2 align="center">ترسیم بیضی با SVG</h2>
      <svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="150" cy="50" rx="100" ry="50" fill = "orangered" />
      </svg
   </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

صفت ها (Attributes)

cx

موقعیت بیضی را در محور افقی (X) تعیین می کند.

cy

موقعیت بیضی را در محور عمودی (Y) تعیین می کند.

rx

شعاع بیضی را در محور افقی (X) را تعیین می کند

ry

شعاع بیضی در محور عمودی (Y) را تعیین می کند.

SVG Polygon

تگ <polygon> از مجموعه تگ های زیر مجموعه <svg> است و برای رسم چند ضلعی (سه ضلع و بیشتر) بکار می رود. این عنصر اشکال بسته را ایجاد می کند.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      h2 {
        direction: rtl;
      }
      svg {
        position: relative;
        left: 50%;
        transform: translateX(-40%);
      }
    </style>
  </head>
  <body>
    <h2 align="center">ترسیم شکل با خطوط راست توسط SVG</h2>
    <svg height="100" xmlns="http://www.w3.org/2000/svg">
      <polygon points="0,100 50,25 50,75 100,0" fill="red" />
      <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black"stroke-width="2px"/>
    </svg>
  </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

صفت ها (Attributes)

points

این صفت لیستی از نقاطی را مشخص می کند که خطوط بین آنها ترسیم می شود. مختصات این نقاط به صورت یک جفت (x,y) مشخص می شود.

SVG Polyline

تگ <polyline> از مجموعه تگ های زیر مجموعه <svg> است و برای رسم اشکال باز بکار می رود. در این شکل ها آخرین نقطه به اولین نقطه متصل نمی شود.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      h2 {
        direction: rtl;
      }
      svg {
        position: relative;
        left: 50%;
        transform: translateX(-40%);
      }
    </style>
  </head>
  <body>
    <h2 align="center">ترسیم شکل با خطوط راست توسط SVG</h2>
    <svg height="100" xmlns="http://www.w3.org/2000/svg"
      <polyline points="0,100 50,25 50,75 100,0" />
      <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="red" />
    </svg>
  </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

صفت ها (Attributes)

points

این صفت لیستی از نقاطی را مشخص می کند که خطوط بین آنها ترسیم می شود. مختصات این نقاط به صورت یک جفت (x,y) مشخص می شود.

SVG Linear Gradients

تگ <lineargradient> از مجموعه تگ های زیر مجموعه <svg> است که برای ایجاد شیب رنگ (gradient) بکار می رود.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      h2 {
        direction: rtl;
      }
      svg {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <h2 align="center">ترسیم گرادینت توسط SVG</h2>
    <svg height="100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="myGradient" gradientTransform="rotate(90)">
          <stop offset="5%" stop-color="gold" />
          <stop offset="95%" stop-color="red" />
        </linearGradient>
      </defs>
      <circle cx="145" cy="50" r="50" fill="url('#myGradient')" />
    </svg>
  </body>
</html>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

صفت ها (Attributes)

gradientTransform

این صفت درجه گرادینت را مشخص می کند.

href

این صفت یک عنصر <lineargradient> دیگر را به عنوان مرجع قرار می دهد و از آن به عنوان قالب آماده استفاده می کند.

x1

موقعیت نقطه آغازین گرادینت را در محور افقی (X) را مشخص می کند.

x2

موقعیت نقطه پایانی گرادینت را در محور افقی (X) را مشخص می کند.

y1

موقعیت نقطه آغازین گرادینت را در محور عمودی (Y) را مشخص می کند.

y2

موقعیت نقطه پایانی گرادینت را در محور عمودی (Y) را مشخص می کند.

پشتیبانی مرورگرها
نسخه های جدید تمام مرورگرها از این تگ HTML پشتیبانی می کنند.

پست قبلی

تگ canvas در HTML

پست بعدی

تگ audio در HTML

پست بعدی
html-audio-tag

تگ audio در HTML

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن