اتعلمنا قبل كدة ازاي نرسم اشكال جميلة ونصمم لوجوهات باستخدام HTML فقط بدون أي مكتبات خاريجة

انهاردة هنتعلم ازاي نرسم الاشكال المغلقة والاشكال غير المنتظمة

المقال دة جزء من سلسلة مقالات بتتكلم عن الرسم ب HTML

1- أساسيات SVG

2- رسم الاشكال المغلقة والاشكال غير المنتظمة

SVG PolyLine

اتعلمنا نرسم خط باستخدام Lineو المرادي هنرسم شكل متعدد الخطوط باستخدام PolyLine

الفكرة هنا اننا محتاجين ندد مجموعة من النقط المتتالية اللي لما هنوصلها ببعض هتطلعلنا خطوط متوصلة ببعضها

كل نقطة بنحدد احداثياتها x,y

ماتنساش قبل ما تبدأ ترسم الاشكال تعمل مساحة للرسم الاول

<svg width="350" height="300" xmlns="http://www.w3.org/2000/svg" style="background: gray">
 <polyline points="0,0 50,150 100,75 150,50 200,140 250,140" fill="none" stroke="green" />
</svg>

SVG Polygon

لرسم اشكال مغلقة زي مثلا السداسي والثماني بنستخدم Polygon وبرضو بنحدد نقاط الاركان

الشكل لازم يكون مغلق, بس مش لازم انت تغبقه بنفسك لان HTML هيقفلهولك اوتوماتيك

لو عاوز ترسم شكل مفتوح ممكن مثلا تستخدم PolyLine

<svg width="350" height="300" xmlns="http://www.w3.org/2000/svg">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>

SVG text

نقدر كمان نكتب اي نصوص علي الاشكال باستخدام text

<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="none" stroke="red" font-size="35">I love SVG!</text>
</svg>

اما لو عاوزين جزء معين من النص يكون له خصائص او ستايل مختلف ممكن نستخدم tspan

زي span اللي بنستخدمها مع html العادية عشان نعزل عنصر عن باقية العناصر

<svg height="40" width="250" xmlns="http://www.w3.org/2000/svg">
 <text x="5" y="30" fill="red" font-size="35">
   I Love <tspan fill="none" stroke="green">SVG</tspan>!
 </text>
</svg>

<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">

<!-- نبدأ الاول برسم الخطوط -->
<path d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
<path d="M 250 50 l 150 300" stroke="red" stroke-width="4"/> 

 <!-- الخط الاخضر  -->
<path d="M 175 200 l 150 0" stroke="green" stroke-width="4"/> 

<!-- الكيرف الازرق -->
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none"/> 

<!-- العلامات, وهي عبارة عن دوائر صغيرة مصمتة ->
<circle cx="100" cy="350" r="4" fill="black" /><circle cx="250" cy="50" r="4" fill="black" />
<circle cx="400" cy="350" r="4" fill="black" />  

<!-- الحروف -->
<text x="100" y="350" dx="-30">A</text>

SVG images and links

وطبعا نقدر نضيف روابط وصور

<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg"> 
  <a href="https://www.mobarmegeen.com" target="_blank">
      <text x="5" y="15" fill="red">Mobarmegeen Platform</text>
  </a>
  <image height="200" width="300" href="flower.jpg" />
</svg>

المرة الجاية هنتعلم نستخدم الفلاتر وكمان هنكتب نصوص علي مسارات عشوائية زي دة كدة