HTML Tutorial

عنصر <svg>

استخدام <svg>

تستخدم علامة <svg> لإنشاء رسومات متجهية قابلة للتطوير (SVGs) في مستندات HTML. يمكن استخدامها لإنشاء رسومات ثنائية الأبعاد ديناميكية، مثل المخططات والرسوم البيانية والرموز.

سمات <svg>

  • width: تحدد عرض الصورة بالبكسل.
  • height: تحدد ارتفاع الصورة بالبكسل.
  • viewBox: تحدد إحداثيات منطقة العرض للصورة.
  • preserveAspectRatio: تحافظ على نسبة العرض إلى الارتفاع للصورة.

أمثلة على <svg>

إليك مثال بسيط على علامة <svg> لإنشاء دائرة:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red" />
</svg>

استكشاف علامة <svg>

لاستكشاف علامة <svg> بمزيد من التفصيل، إليك مثال HTML بسيط يوضح كيفية إنشاء رسم بياني باستخدام <svg> وJavaScript:

<!DOCTYPE html>
<html>
<body>
  <script>
    // إنشاء عنصر SVG
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "500");
    svg.setAttribute("height", "500");

    // إضافة محور X
    var xAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
    xAxis.setAttribute("x1", "0");
    xAxis.setAttribute("y1", "250");
    xAxis.setAttribute("x2", "500");
    xAxis.setAttribute("y2", "250");
    svg.appendChild(xAxis);

    // إضافة محور Y
    var yAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
    yAxis.setAttribute("x1", "250");
    yAxis.setAttribute("y1", "0");
    yAxis.setAttribute("x2", "250");
    yAxis.setAttribute("y2", "500");
    svg.appendChild(yAxis);

    // إضافة بيانات مخطط
    var data = [
      { x: 50, y: 100 },
      { x: 100, y: 150 },
      { x: 150, y: 200 },
      { x: 200, y: 250 },
      { x: 250, y: 300 },
    ];

    // رسم المخطط
    for (var i = 0; i < data.length; i++) {
      var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      circle.setAttribute("cx", data[i].x);
      circle.setAttribute("cy", data[i].y);
      circle.setAttribute("r", "5");
      circle.setAttribute("fill", "blue");
      svg.appendChild(circle);
    }

    // إضافة عنصر SVG إلى الصفحة
    document.body.appendChild(svg);
  </script>
</body>
</html>