امتیاز موضوع:
  • 4 رأی - میانگین امتیازات: 3
  • 1
  • 2
  • 3
  • 4
  • 5

آموزش تگ svg در HTML

#1
تگ svg تگی است همانند یک ظرف برای نگهداری اشکال گرافیکی که ایجاد می شوند، اشکال گرافیکی مثه یک مربع یا دایره و … که همگی میتوانند درون تگ svg نگهداری شوند.

کلمه SVG مخفف Scalable Vector Graphics و به معنی ( گرافیک برداری مقیاس پذیر ) می باشد که در HTML5 این تگ یک تگ جدید/اضافه شده است

مثال شماره ۱ : رسم دایره بهمراه خط دور لبه


کد:
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="#d51c00" />
</svg>

</body>

مثال شماره ۲ : رسم مربع با خط دور لبه و گوشه های گرد شده

کد:
<body>

<svg width="120" height="120">
<rect x="5" y="5" rx="10" ry="5" width="100" height="100" style="fill:#00b185;stroke:#000;stroke-width:3;" />
</svg>

</body>


مثال شماره ۳ : رسم دایره با محتوا (یک متن در داخل دایره)


کد:
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="#d51c00" />
  <text fill="#ffffff" font-size="13" font-family="tahoma" x="18" y="56">Free-Learn</text>
</svg>

</body>
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
ناشناس
پاسخ
 سپاس شده توسط shghyegh ، شـــقآیــق ، βάરãɲ
آگهی


[-]
به اشتراک گذاری/بوکمارک (نمایش همه)
google Facebook cloob Twitter
برای ارسال نظر وارد حساب کاربری خود شوید یا ثبت نام کنید
شما جهت ارسال نظر در مطلب نیازمند عضویت در این انجمن هستید
ایجاد حساب کاربری
ساخت یک حساب کاربری شخصی در انجمن ما. این کار بسیار آسان است!
یا
ورود
از قبل حساب کاربری دارید? از اینجا وارد شوید.


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان