أحدث البرامج التعليمية وتطوير الشبكة
 

SVG في HTML

❮ السابق التالي الفصل ❯

في HTML5، يمكنك تضمين عناصر SVG مباشرة في صفحات HTML.

تضمين SVG مباشرة في صفحات HTML

هنا مثال على رسم SVG بسيط:

عذرا، متصفحك لا يدعم SVG المضمنة.

وهنا هو رمز HTML:

مثال

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
انها محاولة لنفسك »

SVG Code explanation:

  • تبدأ صورة SVG مع <svg> العنصر
  • العرض والارتفاع سمات من <svg> عنصر تحديد العرض والارتفاع للصورة SVG
  • و <circle> عنصر يستخدم لرسم دائرة
  • سمات CX وقبرصي تحدد إحداثيات س وص من مركز الدائرة. إذا تم حذف CX وقبرصي، يتم تعيين مركز الدائرة إلى (0, 0)
  • و r تحدد السمة نصف قطر الدائرة
  • السيطرة على سمات السكتة الدماغية والسكتة الدماغية عرض كيفية ظهور الخطوط العريضة لشكل. وضعنا الخطوط العريضة للدائرة إلى "الحدود" الأخضر 4PX
  • و fill تشير السمة إلى اللون داخل الدائرة. وضعنا لون التعبئة إلى الأصفر
  • الإغلاق </svg> يغلق العلامة صورة SVG

ملاحظة: منذ مكتوب SVG في XML، جميع العناصر يجب أن تكون مغلقة بشكل صحيح!


❮ السابق التالي الفصل ❯