Professional Documents
Culture Documents
كتاب الجرافيك الأقوي - صخرة الأساس في SVG حسونة اكاديمي
كتاب الجرافيك الأقوي - صخرة الأساس في SVG حسونة اكاديمي
نبذه مختصرة
هذا الكتاب يعد للقارئ
بمثابة صخرة قوية ثابته
بفضل اهلل من األساس في
عالم الويب ،مع عالم
SVGالرائع وأهم
تفاصيلها من البداية الى
االحتراف بفضل اهلل ،حيث
تبدأ من الصفر وتتعلم ،ثم
تتأسس ،ثم تطبق ،ثم تتعلم
أكثر ،ثم تطبق أكثر ،ثم
تتأسس وتتعلم أكثر وأكثر،
PAGE 2
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 4
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
دعم الكتاب
PAGE 10
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
بفضل اهلل ،القناة عليها شرح كمبيوتر ،وويندوز ،ولينكس ،وماك ،وورد،
واكسل ،وأكسس ،وباور بوينت ،ولغات برمجة كثيرة ،وويب بتقنيات كثيرة،
وأمثلة كثيرة ،وتطبيقات كثيرة ،وموبايل ،وأندرويد ،وقواعد بيانات ،ونظم،
وتصميم ،وتحليل بيانات ،وتحليل نظم ،ومناهج دراسية ،ووسائط متعددة،
ودردشة برمجة ،وبرنامج مبيعات ،وبرنامج مطاعم ،ومعلومات متعددة،
وقصص نجاح ،وبرامج جاهزة ،وفوتوشوب ،وشروحات كثيرة بفضل اهلل.
وفعل زر الجرس في القناة رجاء! ال تنسي أن تشترك بالقناة
اآلن. وسجل حساب على موقع حسونة أكاديمي
https://www.hassouna-academy.com/
صفحة رقم 11
ادخل وسجل حساب على الموقع اآلن www.hassouna-academy.com
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 12
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
ويمكنك التخيل وكأنك معك رسام وطلبت منه رسم مربع او دائرة أو أي
شكل على لوحة كبيرة ،ثم قمت باستدعاء نفس الرسام ليرسم نفس
الرسومات على لوحة صغيرة ،فالرسام هنا سيراعي فروقات الحجم دون
أن يمط أو يشد أو يقلص ،فالـ SVGتخدمك أكثر من ذلك.
PAGE 14
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
انتبه! فإنه يوجد ملفات بامتداد svgولها طريقة تصميم ودراسة ،ولكننا
هنا لن نشرح هذا الموضوع ،بل سوف نشرح التعامل مع svgداخل
اللغة ،HTMLعن طريق الوسم ،svgمع تنسيقات اللغة .CSS
عندما تتعلم SVGتستطيع ابتكار أفكار رسومية خاصة بك ،ثم بيعها
والكسب منها.
PAGE 16
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
عندما تتعلم SVGوتتقنها ،تستطيع عمل تقارير احترافية ورسومات
بيانية خفيفة.
عندما تتعلم SVGتستطيع انشاء أشكال ثنائية األبعاد ،أو ثالثية األبعاد،
او منظورات مختلفة حسب احترافك.
عندما تتعلم SVGثم تتعلم البرمجة ،ستكون قادر على إنشاء أشياء
غاية في االحترافية ،وسوف تنتج بعدها ما تحب ،من أفالم كرتونية ،او
ألعاب ،أو مقاطع دعائية.
PAGE 18
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 20
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 22
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 24
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم svg
الوسم svgهو األساس للرسم وكما ذكرنا يأخذ عرض وطول.
></svg
وبعد تشغيل الصفحة تظهر كما بالشكل التالي:
></svg
والناتج سيكون هو ،هو ،مثل السابق تماماً .ولكن اجعل العرض والطول
للوسم svgبـ htmlأفضل حتى ال تختلط األمور مع عرض وطول الـ
cssاألساسيين.
PAGE 26
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم line
الوسم lineيتم وضعه داخل الوسم svgلرسم خط مستقيم ،ويأخذ
النقطة األولي ،x1,y1والنقطة الثانية ،x2,y2بحيث يشد خط بين
النقطتين ،ولون الخط ،strokeوحجم الخط .stroke-width
بشكل جيد يمكنك صناعةline انتبه! فإنه بعد ان قمت بمذاكرة الوسم
وبينما أنا أقوم بتأليف هذا، مع أنه وسم سهل،أشياء كثيرة به بالتفكير
:الجزء فقمت بتأليف رسم الشكل بالكود التالي
<svg width="300" height="130" style="background: #eee">
<line x1=5 y1=20 x2=250 y2=5 stroke=#f00 stroke-width=3 />
<line x1=249 y1=4 x2=249 y2=101 stroke=#00f stroke-width=3 />
<line x1=249 y1=100 x2=5 y2=120 stroke=#99f stroke-width=3 />
<line x1=6 y1=20 x2=6 y2=121 stroke=#080 stroke-width=3 />
</svg>
التنفيذ
PAGE 28
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
فقد احضرت شكل لمكعب وفتحته على،بل فعلت أكثر من ذلك بفضل اهلل
لكل خط لهذا المكعب ثمy وx وأخذت النقاطpaint برنامج الرسام
:أنشأت بها مكعب بالكود التالي
<svg width="500" height="380" style="background: #ee9">
<line x1=120 y1=24 x2=370 y2=24 stroke=#f00 stroke-width=3 />
<line x1=18 y1=120 x2=270 y2=122 stroke=#f00 stroke-width=3 />
<line x1=18 y1=365 x2=270 y2=366 stroke=#f00 stroke-width=3 />
<line x1=120 y1=268 x2=370 y2=268 stroke=#f00 stroke-width=3 />
<line x1=120 y1=25 x2=120 y2=268 stroke=#f00 stroke-width=3 />
<line x1=370 y1=25 x2=370 y2=268 stroke=#f00 stroke-width=3 />
<line x1=270 y1=120 x2=270 y2=365 stroke=#f00 stroke-width=3 />
<line x1=20 y1=120 x2=20 y2=365 stroke=#f00 stroke-width=3 />
<line x1=120 y1=24 x2=20 y2=120 stroke=#f00 stroke-width=3 />
<line x1=370 y1=25 x2=270 y2=120 stroke=#f00 stroke-width=3 />
<line x1=370 y1=268 x2=270 y2=365 stroke=#f00 stroke-width=3 />
<line x1=120 y1=268 x2=20 y2=365 stroke=#f00 stroke-width=3 />
</svg>
التنفيذ
التنفيذ
PAGE 30
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن سنتعرف على خاصية غطاء الخط stroke-linecapفيكون
مستدير من األطراف بالقيمة roundأو يكون مربع متأخر من األطراف
بالقيمة buttأو يكون مربع عادي من األطراف بالقيمة ،square
وسيتم توضيح ذلك بالكود التالي:
>"<svg width="450" height="200" style="background: #eee
></svg
التنفيذ
PAGE 32
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وأيضاً نالحظ مثال آخر بالكود التالي:
>"<svg width="450" height="100" style="background: #eee
<line x1=30 y1=50 x2=350 y2=50 style="stroke:#808;stroke-
>width:5;stroke-dasharray:7,2" /
></svg
التنفيذ
كما يمكن أن يتم التنويع في هذا العمل ،فال ينحصر على قيمتين يتم تكرارهم
فقط ،وإنما يمكن تكرار ارقام كثيرة ،وسنالحظ في الكود التالي:
>"<svg width="450" height="100" style="background: #eee
<line x1=30 y1=50 x2=350 y2=50 style="stroke:#808;stroke-
>width:5;stroke-dasharray:20,10,10,20" /
></svg
التنفيذ
.وهنا نالحظ أنه كلما نفهم أكثر نصنع ما نريد بفضل اهلل
PAGE 34
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم circle
الوسم circleلرسم دائرة ،ويأخذ نقطة مركز ،cx,cyونصف القطر
،rولون إطار ،strokeوحجم إطار ،stroke-widthولون
الدائرة .fill
الكود
>"<svg width="300" height="300" style="background: #eee
"<circle cx="150" cy="150" r="120" fill="#ADD" stroke="#008
>stroke-width="3" /
></svg
التنفيذ
PAGE 36
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وفيما سبق تخيل معي أنك ترسم باألدوات الهندسية وأحضرت الفرجار أو
ما يعرف في مصر بـ (البرجل) أو باللغة اإلنجليزية compassوحتى
ال تفهم بمعني البوصلة نكتبها )Compass (drawing tool
وهي أداة مشهورة لرسم الدوائر ،مثل الشكل التالي:
</svg>
التنفيذ
PAGE 38
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم a
يمكنك هذا الوسم من تحويل الشكل الى رابط ،وسنجرب بالكود التالي:
>"<svg width="300" height="300" style="background: #eee
>"<a href="https://www.hassouna-academy.com/
"<circle cx="150" cy="150" r="120" fill="#ADD" stroke="#008
>stroke-width="3" /
></a
></svg
التنفيذ
وبعد الضغط يفتح موقع حسونة أكاديمي ،كما يوضح الشكل التالي:
desc الوسم
حيث تكتب مالحظاتك بعيداً عن،تستطيع عمل توثيق من خالل هذا الوسم
:[4] وسنجرب بالكود التالي،تنفيذ الكود
<svg viewBox="0 0 10 10">
<circle cx="5" cy="5" r="4">
<desc>
I'm a circle and that description is here to
demonstrate how I can be described, but is it
really necessary to describe a simple circle
like me?
</desc>
</circle>
</svg>
التنفيذ
PAGE 40
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم rect
الوسم rectلرسم مستطيل ،ويأخذ عرض ،widthوطول
،heightونقطة بداية ،x,yونصف قطر طولي ،ryونصف قطر عرضي
، rxمع العلم أن انصاف األقطار هذه تجعل المستطيل منحني األطراف
حتى يصل الى شكل بيضاوي ،ثم يصل إلى دائرة ،ولون إطار ،stroke
وحجم إطار ،stroke-widthولون التعبئة .fill
وهنا الحظ أننا لم نحدد نقطة البداية فبدأ الرسم في بدايات الحواف ،وأخذ
عرض 150وطول 100وتعبئة بدون إطار.
صفحة رقم 41
ادخل وسجل حساب على الموقع اآلن www.hassouna-academy.com
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: بالكود التالي50 واآلن سنرسم مربع يبعد عن الحواف بـ
الكود
<svg width="250" height="250" style="background: #eee">
<rect x=50 y=50 width=100 height=100 style="fill: #008;" />
</svg>
التنفيذ
PAGE 42
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:واآلن سنرسم مربع مع اإلطار بالكود التالي
<svg width="250" height="150" style="background: #eee">
<rect x=9 y=9 width=90 height=90 fill=#ADD stroke=#008
stroke-width=5 />
</svg>
التنفيذ
التنفيذ
43 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: لتدوير حواف المستطيل بالكود التاليry وrx واآلن سنستخدم
<svg width="250" height="200" style="background: #eee">
<rect x=9 y=9 width=70 height=70 fill=#F00 stroke=#000 rx=20 ry=20 />
</svg>
التنفيذ
PAGE 44
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:واآلن سنرسم الشكل المعبر عن قاعدة البيانات بالكود التالي
<svg width="250" height="250" style="background: #eee">
<rect x=50 y=50 width=120 height=150 fill=#FD0 stroke=#000 />
<rect x=50 y=15 width=120 height=70 fill=#FD0 stroke=#000 rx=60 />
</svg>
التنفيذ
التنفيذ
45 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
ثم نجعله، ولكن سنغير لون المستطيل،واآلن سنرسم نفس الشكل السابق
: وذلك بالكود التالي،آخر الكود ليكون رسمه طاغي على الدوائر
<svg width="350" height="250" style="background: #eee">
<rect x=15 y=50 width=70 height=120 fill=#FD0 stroke=#000 rx=60 />
<rect x=165 y=50 width=70 height=120 fill=#FD0 stroke=#000 rx=60 />
<rect x=50 y=50 width=150 height=120 fill=#F50 stroke=#000 />
</svg>
التنفيذ
.انتبه! فإن الذي يتم رسمه أخيراً هو الذي يطغي على ما قبله
PAGE 46
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم ellipse
الوسم ellipseلرسم شكل بيضاوي ،ويأخذ نقطة مركز ،cx,cy
ونصف قطر طولي ،ryونصف قطر عرضي ،rxفمثالً لو أعطيت الخاصيتين
rxو ryالقيمة 1ستتكون أمامك نقطة صغيرة ،ثم تزيد حيث زادوا وتقل
حيث قلوا ،ولون إطار ،strokeوحجم إطار ،stroke-width
ولون التعبئة .fill
تابع الشكل التالي لتفهم الوسم ellipseجيداً:
انتبه! فإنه في المثال السابق تم ضبط نقطة المركز cx, cyعلى قيمة
تتوسط اجمالي القطرين الطولي والعرضي مع زيادة بسيطة لتترحل قليالً من
اليسار ومن األعلى.
PAGE 48
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
،كما يمكن أن نرسم أشكال بيضاوية مختلفة الحجم وتكون لنفس نقطة المركز
:وذلك من خالل الكود التالي
<svg width="500" height="250" style="background: #eee">
</svg>
التنفيذ
49 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:ويمكن أيضاً تأليف شكل آخر مثل المثال بالكود التالي
<svg width=500 height=400 style=background: #FFF>
<ellipse cx=250 cy=350 rx=230 ry=40 style="fill:#CCC" />
<ellipse cx=250 cy=300 rx=200 ry=35 style="fill:#BBB" />
<ellipse cx=250 cy=255 rx=170 ry=30 style="fill:#AAA" />
<ellipse cx=250 cy=210 rx=140 ry=25 style="fill:#999" />
<ellipse cx=250 cy=175 rx=110 ry=20 style="fill:#888" />
<ellipse cx=250 cy=145 rx=80 ry=15 style="fill:#777" />
<ellipse cx=250 cy=122 rx=50 ry=10 style="fill:#666" />
<ellipse cx=250 cy=107 rx=20 ry=5 style="fill:#555" />
</svg>
التنفيذ
PAGE 50
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: فقط بالكود التاليellipse يمكن أيضاً أن نرسم وجه بالوسم
<svg width=500 height=400 style=background:#FFF>
<ellipse cx=250 cy=250 rx=100 ry=65 style="fill:#CCC" />
<ellipse cx=250 cy=225 rx=100 ry=65 style="fill:#FFF" />
<ellipse cx=150 cy=60 rx=30 ry=30 style="fill:#BBB" />
<ellipse cx=350 cy=60 rx=30 ry=30 style="fill:#BBB" />
<ellipse cx=250 cy=150 rx=20 ry=60 style="fill:#AAA" />
</svg>
التنفيذ
وهنا نالحظ أنه تم التغطية بشكل بيضاوي على شكل بيضاوي آخر ليخرج
.لنا الفم المبتسم
51 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:يمكن أيضاً أن نرسم زهرة جميلة بالكود التالي
<svg width=200 height=320 style=background:#FFF>
</svg>
التنفيذ
.Red بناء على الدائرة الـPink وهنا نالحظ رسم الدوائر الـ
PAGE 52
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم text
الوسم textلرسم النص ،ويأخذ حجم الخط ،font-sizeونقطة
البدء ،x,yولون إطار ،strokeوحجم إطار ،stroke-width
ولون التعبئة fillوبعض الخصائص األخرى.
></svg
التنفيذ
PAGE 54
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
بحيث يكونوا،tspan يمكن أيضاً كتابة نصوص منفصلة عن طريق الوسم
: وسنجرب بالكود التالي،text تابعين للوسم
<svg width=760 height=230 style=background:#FFF>
<text x=10 y=50 fill=#CC0 font-size=45 font-family=impact
stroke=#C00>
</text>
</svg>
التنفيذ
55 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
image الوسم
سواءSVG لعرض الصور في مخطط الـimage يتم استخدام الوسم
واستخدامها،svg أو ملفات أخري للـraster كانت صور نقطية
mozilla ويمكن تجربة المثال التالي لعرض صورة من موقع،ًسهل جدا
:بسهولة
الكود
<svg width="200" height="200" >
<image
href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
height="200" width="200"/>
</svg>
التنفيذ
PAGE 56
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم polygon
الوسم polygonلرسم مضلع ،ويأخذ النقاط ،pointsوبداخل
pointsيتم وضع قيمة xثم كوما " ",ثم قيمة yثم مسافة ،وهكذا
لباقي النقاط بنفس الطريقة ،ولون إطار ،strokeوحجم إطار
،stroke-widthولون التعبئة .fill
واآلن سوف ارسم لكم مضلع بنقاط تقديرية كبداية بالكود التالي:
><svg width=350 height=230 style=background:#FFF
><polygon points="50,10 150,150 10,200" /
></svg
التنفيذ
وهنا نالحظ أن الشكل باللون األسود ألننا لم نحدد fillله ،ونالحظ أننا
حددنا له ثالث نقاط فقط ،وهي 50,10للنقطة األولي و150,150
للنقطة الثانية و 10,200للنقطة الثالثة ،ثم هو عبئ ما بين الثالث
نقاط التي حددناها.
PAGE 58
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
واآلن تأمل في الشكل الذي أماك ،وستشعر أنه ثالثي األبعاد ،3Dمع
العلم أنك لو أحببت أن تجعله أدق من ذلك ستجعل الزيادة بالعالمات
العشرية ،بحيث يكون بمنتهي الدقة كما تحب ،حيث أنك على هذا الحال إذا
قمت بتكبيرة الى أعلي درجة في المتصفح ستكون أطرافه السفلي كالتالي:
ثانياً إذا تخيلنا هذا الشكل مغطي وليس شفاف فسيكون له جوانب ،وأيضاً
حسب منظورك له ،ألن هذا الشكل يمكن أن تراه بأكثر من صورة ،نعم تراه
كذلك وسأثبت لك ،ولكن ركز جيداً ،وال تتعجل ،وانتبه لعينيك حتى ال يصيبهم
الوجع من التخيل ،وال أمزح ،بل بالفعل أتحدث إليك بجدية تامة ،واآلن
تخيل معي هذا الشكل وكأنه مغطي كالتالي:
PAGE 60
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
نعم هذا الشكل مشتق بالفعل من الشكل األصلي ،والظاهر منه لنا في منظور
هذه الحالة ،الجزء العلوي ،والجزء الجانبي ،والجزء األمامي ،واآلن سنري
شكل آخر مشتق من نفس الشكل األصلي ،وهو كالتالي:
نعم وهذا الشكل أيضاً مشتق من الشكل األصلي ،ولكن من منظور آخر،
ويظهر لنا من هذا المنظور ،الجزء األمامي ،والجزء الجانبي ،والجزء السفلي،
بل ويمكن أن تراه من منظور آخر وكأن الجزء السفلي قاعدة له.
خامساً البد أن نعتمد على اختيار لون ثم نجعل كل جانب مختلف قليالً عن
اآلخر حتى يظهر شكل المكعب.
PAGE 62
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
سابعاً ستكون النقاط المحددة بالترتيب كما يلي:
الجزء العلوي يحمل النقاط التالية:
سنرسم،واآلن بعد هذا الفهم العميق المفصل بفضل اهلل لألجزاء الثالثة
:المكعب بالكود التالي
<svg width="500" height="380" style="background: #FFF">
<!--top-->
<polygon fill=#EE0 points="120,24 370,24 270,120, 20,120" />
<!--front-->
<polygon fill=#FF0 points="18,120 270,120 270,366, 20,365" />
<!--side-->
<polygon fill=#CC0 points="270,120 370,24 370,268, 270,365 " />
</svg>
PAGE 64
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
الحظ أن التخطيط قبل العمل هام جداً لتجنب األخطاء والوصول للهدف.
الحظ أنه لوال التقسيم الى 3أشكال لم نكن نستطيع التلوين بألوان مختلفة،
حيث لو كان هنا شكل واحد سيكون له لون واحد.
الحظ أن الكود ما هو اال ثالثة أسطر فقط بداخل الوسم svgولكن بعد
الفهم يكون لديك ملكة اإلبداع بفضل اهلل.
الحظ أنك تستطيع اآلن تكوين أي شكل بنفس الفكرة ،حيث تحدد النقاط لكل
جانب ثم يتم التنفيذ بعد التخطيط.
صفحة رقم 65
ادخل وسجل حساب على الموقع اآلن www.hassouna-academy.com
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
على شكل سهم يشير نحوpolygon واآلن سوف نحدد نقاط مضلع
: ثم سنرسمه بالكود التالي،اليسار
<svg height="210" width="500">
<polygon points="100,135 170,80 170,100 280,100 280,170 170,170 170,190"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
التنفيذ
ظهر السهم بصورة،وهنا الحظ أنه عندما تم التخطيط للنقاط بشكل سليم
.صحيحة مع النقاط المحددة
PAGE 66
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن سنرسم نفس الشكل السابق بدون تعبئة بالكود التالي:
>"<svg height="210" width="500
"<polygon points="100,135 170,80 170,100 280,100 280,170 170,170 170,190
>style="fill:none;stroke:#00A;stroke-width:3" /
></svg
التنفيذ
ومن هنا يتبين لنا أننا نستطيع رسم األشكال المضلعة polygons
بدون تعبئة ،أي خطوط فقط.
التنفيذ
PAGE 68
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وأيضاً إذا تم الفصل بين قيم النقاط بـ كوما " ",ستعمل أيضاً األشكال،
وسنجرب ذلك بالكود التالي:
>"<svg width="500" height="380" style="background: #FFF
><polygon fill=#0E0 points="120,24,370,24,270,120,20,120" /
><polygon fill=#0F0 points="18,120,270,120,270,366,20,365" /
><polygon fill=#0C0 points="270,120,370,24,370,268,270,365 " /
></svg
التنفيذ
الحظ أن الشكل تم رسمه بنجاح ،مع الفصل بين النقاط بـ كوما فقط.
التنفيذ
الوسم polyline
الوسم polylineلرسم خطوط مستقيمة ،ويأخذ النقاط ،points
وبداخل pointsيتم وضع قيمة xثم كوما " ",ثم قيمة yثم
مسافة ،وهكذا لباقي النقاط بنفس الطريقة ،بحيث يشد خطوط بين جميع
النقاط ،وبدون أن يغلق الشكل ،ويأخذ أيضاً لون الخط ،strokeوحجم
الخط ،stroke-widthومن هنا يتضح لنا أنه مثل الوسم
polygonمع اختالف أنه ال يغلق الشكل ويعمل بخطوط.
ولنجرب هذا ،سنستخدم نفس نقاط السهم الذي تم عمله في درس الوسم
polygonمن قبل ،وستالحظ شيء غريب ،وهو أن الوسم
polylineلن يكمل آخر نقطة ،وستري بالكود التالي:
>"<svg height="210" width="500
"<polyline points="100,135 170,80 170,100 280,100 280,170 170,170 170,190
>style="fill:none;stroke:#00A;stroke-width:5" /
></svg
التنفيذ
التنفيذ
سيظهر السهر بالتعبئةstroke ومن هنا نفهم أنه إذا تم إزالة اإلطار
: وسنجرب بالكود التالي،بشكل طبيعي
<svg height="210" width="500">
<polyline points="100,135 170,80 170,100 280,100 280,170 170,170 170,190"
style="fill:#BB0;" />
</svg>
التنفيذ
PAGE 72
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن سنرسم شكل " "zigzagبالوسم ،polylineمع التخطيط له
بسهولة إن شاء اهلل ،حيث أنك إذا فكرت في الشكل الـ zigzagستجده
مثل الشكل التالي:
وبعد أن نالحظ شكل الـ zigzagسنري أنه يزيد قيمة xبطريقة منتظمة
مع تبديل قيمة yبين قيمتين اعلي وأسفل ،مثالً يبدأ من أسفل الى أعلي
ثم الى أسفل ثم الى اعلي ،وهكذا ،وسنجرب ذلك بالكود التالي:
>"<svg height="210" width="500
"<polyline points="0,50 50,0 100,50 150,0 200,50 250,0 300,50 350,0 400,50
>style="fill:none;stroke:#00A;stroke-width:2" /
></svg
التنفيذ
وهنا نالحظ أن xتزيد زيادة ثابتة بـ 50في كل مرة ،مع تراوح قيمة
yبين 0و ،50فتم انتاج شكل الـ zigzagبسهولة بفضل اهلل.
title الوسم
: وسنجرب بالكود التالي،تستطيع استخدامه لوضع تلميحات على العناصر
<svg width="300" height="300" style="background: #eee">
<title>This is my circle</title>
</circle>
</svg>
التنفيذ ولمس
ونالحظ، الموجود بهاtitle وهنا نالحظ أنه عند لمس الدائرة يظهر الـ
. بهtitle < لوضعcircle> أننا أغلقنا الوسم بـ
PAGE 74
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
><style
{.myClass
;fill: lime
;stroke: blue
;stroke-width: 5
}
></style
><rect class="myClass" width=100 height=100 /
></svg
التنفيذ
PAGE 76
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:CSS معSVG الكود التالي مثل الكود السابق ولكن انتبه! فإنه بالـ
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
rect.my{
fill: lime; stroke: green; stroke-width: 3;
transform: rotate(45deg);
}
</style>
</head>
<body>
</body>
</html>
التنفيذ
77 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: خالصSVG الكود التالي مثل الكود السابق ولكن انتبه! فإنه بالـ
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style></style>
</head>
<body>
</body>
</html>
التنفيذ
PAGE 78
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم LinearGradient
الوسم ،linearGradientوالوسم ،stopلصناعة تدرج لوني
خطي ،حيث يوضع الوسم linearGradientداخل الوسم defs
للتعريف ،ويأخذ معرف idلنطبقه على الشكل الذي نريد فيما بعد ،داخل
نفس وسم ،svgويأخذ نقطة بداية التدرج ،x1,y1ونقطة نهاية
التدرج ،x2,y2أما الوسم ،stopفيستخدم واحد لكل لون ،ويأخذ
خاصية stop-colorللون التدرج ،وخاصية offsetبقدر استحواذ
اللون على التدرج ،وخاصية stop-opacityلشفافية التدرج ،وبعد
كل هذا يتم تخصيص هذا العمل عن طريق خاصية fillللعنصر المقصود
تأثير التدرج عليه ،وتكون الكلمة urlثم قوس ( ثم بين رمزين
' ' Single Quotesيتم وضع الرمز #ثم idالتدرج ثم اغالق
القوس ) ثم يعمل بعد ذلك إن شاء اهلل.
PAGE 80
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
لفهم التدرج سأعرض لك برنامج الفوتوشوب ،وسأكون عليه تدرج من
ثالثة ألوان ،ثم أطبقه على مثال ،والشكل التالي يوضح هذا التدرج:
PAGE 82
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
وبنفس الطريقة السابقة يمكن أن تقوم بإنتاج تدرجات كما تريد ،وليس
شرط أن تستخدم برنامج الفوتوشوب ،حيث يمكن أن تبحث عن ذلك عن
طريق جوجل بجملة " "create gradient onlineوستري
مواقع خدمية تخدمك في تكوين التدرج ،ثم تأخذ نواتجه وتحولها في
صفحتك وتستخدمها كما تريد بفضل اهلل.
الوسم RadialGradient
الوسم ،radialGradientوالوسم ،stopلصناعة تدرج لوني
مشع ،حيث يوضع الوسم radialGradientداخل الوسم defs
للتعريف ،ويأخذ معرف idلنطبقه على الشكل الذي نريد فيما بعد ،داخل
نفس وسم ،svgويأخذ نقطة مركز لتعريف الدائرة الخارجية ،cx,cy
ونصف قطر للدائرة الخارجية ،rويأخذ نقطة مركز لتعريف الدائرة الداخلية
،fx,fyونصف قطر للدائرة الداخلية ،أما الوسم ،stopفيستخدم واحد
لكل لون ،ويأخذ خاصية stop-colorللون الشعاع ،وخاصية
offsetبقدر استحواذ اللون على التدرج ،وخاصية stop-opacity
لشفافية الشعاع ،وبعد كل هذا يتم تخصيص هذا العمل عن طريق خاصية
fillللعنصر المقصود تأثير التدرج عليه ،حيث يتم وضع الكلمة urlثم
قوس ( ثم بين رمزين ' ' Single Quotesيتم وضع الرمز #
ثم idالتدرج ثم اغالق القوس ) ثم يعمل إن شاء اهلل ،واآلن سنجرب
التدرج الشعاعي بالكود التالي]:[4
>"<svg height="250" width="500
><!-- define my linear gradient --
><defs
>"<radialGradient id="myGradient
><stop offset="10%" stop-color="gold" /
><stop offset="95%" stop-color="red" /
></radialGradient
></defs
PAGE 84
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
PAGE 86
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
%50 على قيمةcx, cy, r, fx, fy واآلن سوف نضبط الخصائص
:ثم سنجرب بالكود التالي
<svg height="250" width="500">
<defs>
<radialGradient id="myGrad" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="10%" stop-color="white" />
<stop offset="30%" stop-color="lightblue" />
<stop offset="50%" stop-color="darkblue" />
<stop offset="65%" stop-color="navy" />
<stop offset="95%" stop-color="#13095f" />
</radialGradient>
</defs>
87 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: لنجرب بالكود التالي%80 الىr واآلن سنزيد قيمة
<svg height="250" width="500">
<defs>
<radialGradient id="myGrad" cx="50%" cy="50%" r="80%"
fx="50%" fy="50%">
<stop offset="10%" stop-color="white" />
<stop offset="30%" stop-color="lightblue" />
<stop offset="50%" stop-color="darkblue" />
<stop offset="65%" stop-color="navy" />
<stop offset="95%" stop-color="#13095f" />
</radialGradient>
</defs>
PAGE 88
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: لنجرب بالكود التالي%20 الىcx واآلن سنقلل قيمة
<svg height="250" width="500">
<defs>
<radialGradient id="myGrad" cx="20%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="10%" stop-color="white" />
<stop offset="30%" stop-color="lightblue" />
<stop offset="50%" stop-color="darkblue" />
<stop offset="65%" stop-color="navy" />
<stop offset="95%" stop-color="#13095f" />
</radialGradient>
</defs>
89 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: لنجرب بالكود التالي%80 الىcx اآلن سنزيد قيمة
<svg height="250" width="500">
<defs>
<radialGradient id="myGrad" cx="80%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="10%" stop-color="white" />
<stop offset="30%" stop-color="lightblue" />
<stop offset="50%" stop-color="darkblue" />
<stop offset="65%" stop-color="navy" />
<stop offset="95%" stop-color="#13095f" />
</radialGradient>
</defs>
PAGE 90
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: لنجرب بالكود التالي%20 الىfy واآلن سنقلل قيمة
<svg height="250" width="500">
<defs>
<radialGradient id="myGrad" cx="50%" cy="50%" r="50%"
fx="50%" fy="20%">
<stop offset="10%" stop-color="white" />
<stop offset="30%" stop-color="lightblue" />
<stop offset="50%" stop-color="darkblue" />
<stop offset="65%" stop-color="navy" />
<stop offset="95%" stop-color="#13095f" />
</radialGradient>
</defs>
91 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: لنجرب بالكود التالي%80 الىfy واآلن سنزيد قيمة
<svg height="250" width="500">
<defs>
<radialGradient id="myGrad" cx="50%" cy="50%" r="50%"
fx="50%" fy="80%">
<stop offset="10%" stop-color="white" />
<stop offset="30%" stop-color="lightblue" />
<stop offset="50%" stop-color="darkblue" />
<stop offset="65%" stop-color="navy" />
<stop offset="95%" stop-color="#13095f" />
</radialGradient>
</defs>
PAGE 92
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم path
عن الوسم path
الوسم pathلرسم مسارات متعددة االتجاهات ،ورسم أشكال مختلفة
األنماط ،وأهم خاصية في هذا الوسم هي dوتعريفها باإلنجليزية كالتالي:
The d attribute defines a path to be drawn.
ومعني التعريف السابق هو أن الخاصية dهي التي تحتوي على المسار
المراد رسمه ،وقيم هذه الخاصية وحدها تحتاج الى دراسة.
PAGE 94
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
استخدام Line To
معني Line Toأن ترسم لك خط ،واختصار أمر Line Toهنا
بالحروف L, l, H, h, V, vولكل حرف معني ،حيث تكتب الحرف ثم
احداثيات نقطة نهاية الخط برقمين تفصل بينهم بمسافة او رمز كوما
" ، ",فبحرف Lالكبير ترسم الخط ،وبحرف lالصغير ترسم الخط،
وكالهما يبدأ من النقطة الحالية التي تم ضبطها من خالل move to
كما ذكرنا ،ولكن نهاية الخط المرسوم بالحرف Lيتم احتسابه من الحواف
الرئيسية ،أما نهاية الخط المرسوم بحرف lفيتم احتسابها من النقطة
الحالية ،ولتجربة ذلك ،سنرسم باستخدام حرف Lبالكود التالي:
>"<svg height="250" width="500
><path d="M 5,5 L 50,90" stroke=red stroke-width=3 /
></svg
التنفيذ
PAGE 96
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:واآلن ألثبت لك أكثر سوف أقلل سمك الخط األصفر بالكود التالي
<svg height="250" width="500">
<path d="M 5,5 L 50,90 l 50,90" stroke=red stroke-width=3 />
<line x1=5 y1=5 x2=100 y2=180 stroke=#FF0 stroke-width=2 />
</svg>
التنفيذ
97 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: قبل رسم الخط الثاني بالكود التاليm واآلن سوف نغير الموضع بـ
<svg height="250" width="500">
<path d="M 5,5 L 50,90 m -20,-20 l 50,90" stroke=red
stroke-width=3 />
</svg>
التنفيذ
PAGE 98
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وذلك بكل سهولة ألنه انتهي عند النقطة 50,90تم احتسابها من
الحواف ألننا استخدمنا الـ ،Lوبذلك انتهي عند نفس نقطة نهاية الخط
األول فالتقيا معاً.
PAGE 100
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن سنرسم خطين أفقين متقطعين بطول 90للخط الواحد وبينهما
مسافة 10وذلك بالكود التالي:
>"<svg height="250" width="500
<path d="M 10,10 H 90 m 10,0 h 90" stroke=red stroke-
>width=3 /
></svg
التنفيذ
وهنا نالحظ أننا بدأنا بالـ Mمن النقطة 10,10أي أن المسافة من
أعلي 10والتي البد ان تركز عليها ألنك تعمل بالـ Hوالـ hلرسم
خطوط أفقية ،ثم بعد ذلك تم رسم خط أفقي بـ Hينتهي عند 90ثم
تحركنا بعد هذه النقطة الى النقطة 10,0بـ mلتبعد بـ 10أفقياً وال
تتغير رأسياً ليكون الخطين بجانب بعضهم ،ثم تم رسم خط أفقي ينتهي
عند 90من الموقع الحالي ،فظهر الخطين بجانب بعضهم بنفس الطول
وبينهم مسافة 10كما ذكرنا.
PAGE 102
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن سنرسم خطين رأسيين متقطعين بطول 90للخط الواحد وبينهما
مسافة 10وذلك بالكود التالي:
>"<svg height="250" width="500
<path d="M 50,10 V 90 m 0,10 v 90" stroke=red stroke-
>width=3 /
></svg
التنفيذ
وهنا نالحظ أننا بدأنا بالـ Mمن النقطة 50,10أي أن المسافة من
اليسار 50والتي البد ان تركز عليها ألنك تعمل بالـ Vوالـ vلرسم
خطوط رأسية ،ثم بعد ذلك تم رسم خط رأسي بـ Vينتهي عند 90ثم
تحركنا بعد هذه النقطة الى النقطة 0,10بـ mلتبعد بـ 10رأسياً وال
تتغير أفقياً ليكون الخطين بجانب بعضهم رأسياً ،ثم تم رسم خط رأسي
ينتهي عند 90من الموقع الحالي ،فظهر الخطين بجانب بعضهم رأسياً
بنفس الطول وبينهم مسافة 10كما ذكرنا.
PAGE 104
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وهنا نالحظ أنه تم رسم منحني بالبداية من 50,90بـ Mثم الثالث
نقاط بالـ Cفكان تحكم البداية بالنقطة 50,50وتحكم النهاية بالنقطة
25,10ثم النهاية بالنقطة 150,70ليظهر المنحني أمامك ،ولكن
انتبه! معي ألني سأظهر لك هذه النقاط بحيث أرسم نقطة بالوسم
circleونص بجانبها يوضح ما هي النقطة ،وبهذا يظهر لك ما هو
خلف الكواليس كما يقولون ،وذلك بالكود التالي:
>"<svg height="250" width="500
<path d="M 10,90 C 50,50 25,10 150,70" stroke=red stroke-
>width=3 fill=none /
></svg
التنفيذ
وهذا الخط مطاط بشدة ،ثم تم شدة بقوة من جزء معين ،ماذا سيحدث؟
سيحدث مثالً مثل التالي:
وكلما زادت قوة الشد تغير االنحناء ،وكلما تغير موقع النقطة تغير الشكل،
وهذا هو المطلوب.
واآلن انتبه! وركز معي جيداً ألننا سنظهر ذلك بشكل عملي ،فسنرسم خط
مستقيم من النقطة 10,90الى النقطة ،260,90ثم سنشد بنقطة
بداية تحكم ،90,10ثم نشد بنقطة نهاية تحكم ،180,170أي أنه
تم عمل توازن تقريباً بين هاتين النقطتين ،حيث نقطة تبعد عن بداية الخط
أفقياً بمقدار 80ورأسياً لألعلى بمقدار ،80والنقطة األخرى تبعد عن
نهاية الخط أفقياً بمقدار 80ورأسياً لألسفل بمقدار ،80والفرق أفقياً
بين النقطتين بمقدار ،90ولنري التأثير الحقيقي على الصفحة ،سنطبق كل
هذا بالكود التالي:
PAGE 106
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
<svg height="250" width="500">
<path d="M 10,90 C 90,10 180,170 260,90" stroke=red stroke-
width=3 fill=none />
</svg>
التنفيذ
</svg>
التنفيذ
PAGE 108
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
والحظ،ومن هنا نالحظ أن الترتيب البد أن يكون في االعتبار أثناء عملك
واآلن ركز في المثال كما هو قبل،ًأن مواقع النقاط تغير الشكل تماما
:التبديل بين النقاط بالكود التالي
<svg height="250" width="500">
<path d="M 10,90 C 90,10 180,170 260,90" stroke=red stroke-
width=3 fill=none />
</svg>
التنفيذ
PAGE 110
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
ومن هنا نالحظ أن نصيب نقطة تحكم النهاية أكثر من نصيب نقطة تحكم
البداية فتم االنحناء والميالن أكثر للنهاية ،وإذا جربت لتجعل نقطتان التحكم
لبداية المنحني ونهاية المنحني في نفس مكان الخط األساسي ستالحظ أنه
خط مستقيم عادي ،وسنجرب ذلك بالكود التالي:
>"<svg height="290" width="500
></svg
التنفيذ
></svg
التنفيذ
وهنا أحتاج منك أن تنتبه! جيداً في حساب النقاط التي تم الرسم بها،
حيث أننا لو ركزنا في نقطة ثبات الخط رأسياً أي yفقط سنجد أنها
بالقيمة ،100ولو ركزنا في البداية األفقية أي xفهي 0ثم نزيد كل
مرة 50حتى نصل الى النهاية وهي ،150ولو ركزنا في نقطة تحكم
البداية سنجد أنها رأسياً yبالقيمة ،0ولو ركزنا في نقطة تحكم النهاية
PAGE 112
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
سنجد أنها رأسياً بالقيمة ،200واآلن بعد فهم هذا ،سنكرر نفس العملية
لمنحني آخر بالـ Cبنفس الطريقة ،وذلك بالكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
وهنا قمنا باتباع نفس ما فعلناه في المنحني السابق ،حيث أن البداية هي
النقطة الحالية التي وقفنا عندها وهي 150,100ثم نقطة البداية
زودناها بمقدار 50أفقياً ورأسياً هي بـ ،0ونقطة النهاية زودناها
بمقدار 50أفقياً ورأسياً هي بـ ،200وهنا انتهينا عند النقطة
300,100حيث أن الـ 100هي ثبات الخط األصلي كما هو واضح
في الخط األصفر.
صفحة رقم 113
ادخل وسجل حساب على الموقع اآلن www.hassouna-academy.com
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:واآلن سنكرر المنحني بنفس المفاهيم السابقة أربع مرات بالكود التالي
<svg height="250" width="620">
</svg>
التنفيذ
.وهنا نالحظ أن الشكل منتظم على نفس الوتيرة التي تم العمل عليها
وهنا رجاء انتبه! واعلم أننا نزود بهذه الطريقة ألنه يتم احتساب
الزيادات من الحواف الرئيسية ألننا نستخدم الحرف الكبير لرسم المنحني
PAGE 114
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وهو حرف الـ Cولكن التعامل مع رسم المنحني بالحرف الصغير c
سيختلف تماماً ألنه يحسب الزيادات أو النقصان من آخر نقطة تم الوصول
اليها ،ومن هذا المفهوم سنرسم منحني بـ cبعد Cبالكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
وهنا نالحظ أننا بعد الرسم بالـ Cرسمنا منحني آخر بالـ ،cفأول نقطة
زودنا عليها 50أفقياً لتزيد بـ 50فتكون عند 200وطرحنا منها
100رأسياً لتنقص بـ 100فتكون عند ،0وثاني نقطة زودناها بـ
100أفقياً فتكون عند 250ورأسياً زودناها بـ 100لتكون عند الـ
صفحة رقم 115
ادخل وسجل حساب على الموقع اآلن www.hassouna-academy.com
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
300 أفقياً فتكون عند150 ونقطة النهاية زودناها بـ،200
ولو تم التكرار بنفس،ورأسياً لم نزودها ولم نقللها لتكون ثابتة على الخط
: هي وستكون مثل الكود التالي، ستكون قيم النقط هي،الطريقة
<svg height="250" width="620">
</svg>
التنفيذ
PAGE 116
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن بفضل اهلل تم فهم رسم المنحني جيداً بالـ Cوالـ ،cولكن رجاء
انتبه! فإن الـ Cوالـ cلرسم cubic Bezier curveكما
تعاملنا معه من قبل وهو أشبه بموجتين ،وأما الـ Sوالـ sلرسم
smooth cubic Bezier curveوهو أشبه بموجة واحدة،
وعند الرسم بالـ Sوالـ sيتم وضع نقطة واحدة ،ثم نقطة النهاية،
ولتجربة ذلك سنرسم على أساس خط طوله أفقياً 100ونقطة اإلنحناء
ستكون في منتصف الخط وهي ،50وسنجرب ذلك بالكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
</svg>
التنفيذ
وهنا نالحظ أن شدة اإلنحناء ترجع الى مكان النقطة بالنسبة لمركز الخط
.الرئيسي
PAGE 118
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وإذا أحببنا أن نزيد من شدة اإلنحناء فال مانع أن نضع قيم بالسالب،
وسنجرب هذا بالكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
واآلن سنكرر نفس الشكل السابق ثالث مرات مع وسم pathمختلف لكل
مرة ،حيث أن أول مرة سترسم بالـ Sللوسم pathاألول ،ثم ما يليها
</svg>
التنفيذ
></svg
التنفيذ
وهنا نالحظ أن القيم هي ،هي نفس القيم ،ولكن حدث اختالف شديد في هذا
الشكل والشكل السابق ،ولنري االختالف بين الشكلين أنظر الشكل التالي:
</svg>
التنفيذ
PAGE 122
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
ومن هنا نالحظ أن شكل المنحني األخير متوازن مثل أول شكل تم رسمه
بالـ ،Sواآلن سنكرر موضوع الرسم بالـ sبالكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
بل وحتي،s او الـS وهنا نالحظ أنه حدث اختالف أيضاً مع تكرار الـ
الكبيرة سيحدث نفس الشيء وسنجرب بالكودS إذا استخدمنا تكرار مع الـ
:التالي
<svg height="250" width="620">
</svg>
التنفيذ
PAGE 124
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وهنا نالحظ أن تكرار الـ Sمع الـ Sيجعل الشكل غير منتظم كما هو
متوقع ،وذلك بسبب أن نقطة التحكم في البداية هي انعكاس
Reflectionلنقطة التحكم في نهاية أمر المنحنى السابق إذا كان
من النوع Sاو النوع ،sومن أجل ذلك تم تجربة كل هذه األمثلة لتكون
على دراية بما يحدث وال تتحير كثيراً.
PAGE 126
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وفي الشكل السابق نالحظ اإلنحناء من النقطة 0حتى النقطة 100أفقياً،
ونالحظ أن نقطة التحكم في االنحناء هي 50,0ولو تم التقريب الرأسي
لنقطة التحكم في االنحناء ستكون مثل الكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
ولو تم اإلبعاد الرأسي لنقطة التحكم في االنحناء ستكون مثل الكود التالي:
>"<svg height="250" width="620
<path d="M 0,100
"Q 50,-50 100,100
>stroke=red stroke-width=3 fill=none /
<line x1=0 y1=100 x2=100 y2=100 stroke=#FF0 stroke-width=2
>/
></svg
التنفيذ
صفحة رقم 127
ادخل وسجل حساب على الموقع اآلن www.hassouna-academy.com
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:ولو نظرنا لألشكال الثالثة السابقة بجانب بعض ستكون كالشكل التالي
،ومن هنا نالحظ أن نقطة التحكم في االنحناء تجعلك تتحكم في قوة االنحناء
:وإذا تم تصغير مستوي الخط المستهدف ستتغير مثل الكود التالي
<svg height="250" width="620">
</svg>
التنفيذ
PAGE 128
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
كما يمكن تكرار اإلنحناء بكل راحة دون تعارض ،بالكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
</svg>
التنفيذ
PAGE 130
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
ويمكن عمل منحنيات عكسية بالكود التالي:
>"<svg height="250" width="620
></svg
التنفيذ
ولو فهمت ما سبق جيداً بفضل اهلل ،ستعلم أن اللعب بالمنحنيات سهل
سواء كان طولي أو عرضي أو مائل حسب الطلب ،أي أننا يمكن أن نجرب
منحني على خط طولي بالكود التالي:
>"<svg height="250" width="620
<path d="M 100,0
"Q 0,50 100,100
>stroke=red stroke-width=3 fill=none /
><line x1=100 y1=0 x2=100 y2=100 stroke=#FF0 stroke-width=2 /
></svg
</svg>
PAGE 132
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
</svg>
التنفيذ
PAGE 134
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
ويمكن إنشاء منحنيات عكس بعض بالكود التالي:
>"<svg height="550" width="620
></svg
التنفيذ
></svg
التنفيذ
PAGE 136
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وبالتالي مع استخدام الـ tالصغيرة سيكون األمر أكثر راحة ،حيث أننا
سنحدد الزيادة لكل مرة دون أن نحسب نقطة النهاية مثل الكود التالي:
>"<svg height="550" width="620
></svg
التنفيذ
></svg
التنفيذ
PAGE 140
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وهنا نالحظ أن الجزء الممسوح يزيد بعد تقليل الـ yلنقطة البداية ،مع
تثبيت نقطة النهاية التي نقل عنها ،واآلن سنقلل من الـ xلنقطة البداية
والحظ ما سوف يحدث ،وسنجرب بالكود التالي:
>"<svg height="550" width="620
<path fill=none stroke=red stroke-width=2
d="M 180 190
>A 25 25 0 1 0 200 200" /
></svg
التنفيذ
PAGE 142
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن سنرسم كشكل بيضاوي من نقطة 200,190حتى 200,200
لنجرب بالكود التالي:
>"<svg height="550" width="620
<path fill=none stroke=red stroke-width=2
d="M 200 190
>A 50 25 0 1 0 200 200" /
></svg
التنفيذ
وهنا ظهر الشكل وبه جزء ممسوح ،وإذا تم تقليل الـ yلنقطة البداية
سيزيد هذا الجزء ،ولنري تأثير هذا سنقللها عن yالنهاية بـ 30كاملة،
أي تكون بـ ،170وسنجرب بالمثال التالي:
نقطةy نقطة البداية عنy وهنا نالحظ أن الجزء الممسوح زاد بعد تقليل
واآلن سنغير زاوية الدوران لتري، مع ثبات القيم األخرى30 النهاية بـ
وسنجرب،أن التأثير على الشكل البيضاوي ملحوظ جداً وليس مثل الدائرة
:ذلك بالمثال التالي
PAGE 144
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الكود
>"<svg height="550" width="620
<path fill=none stroke=red stroke-width=2
d="M 200 170
>A 50 25 30 1 0 200 200" /
></svg
التنفيذ
وهنا نالحظ أن الشكل البيضاوي تأثر وكأنك قمت بشدة من األعلى ومن
اليمين في نفس الوقت ،وهنا الزاوية بـ 30درجة.
PAGE 146
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الكود
>"<svg height="550" width="620
<path fill=none stroke=red stroke-width=2
d="M 200 170
>A 50 25 70 1 0 200 200" /
></svg
التنفيذ
وهنا نالحظ أنه بدء يتغير وينقلب لألعلى كما هو واضح في الشكل السابق
بعد جعل الزاوية بـ 70مع ثبات القيم األخرى.
وهنا نالحظ أنه تم التغير تماماً ليكون الشكل وكأن القطر الطولي أكبر
ولكن مع تغيير مقدار زاوية الدوران، مع أنه ليس كذلك،من القطر العرضي
وهذا يجعلك تنتبه! وتكون أكثر حذراً عند التعامل مع هذا،تتغير األمور
.النوع من المنحنيات
PAGE 148
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن سنرجع الزاوية 0كما كانت ،ثم نجعل االتجاه في دوران الساعة،
أي نجعل الـ sweep-flagعلى ،1وسنجرب بالكود التالي:
>"<svg height="550" width="620
<path fill=none stroke=red stroke-width=2
d="M 200 170
>A 50 25 0 1 1 200 200" /
></svg
التنفيذ
وهنا نالحظ أن الشكل هو ،هو مع اختالف أنه عكس ما كان علية ،ولو
تم التغيير في الزوايا لتغير معك أيضاً.
></svg
التنفيذ
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
</svg>
التنفيذ
><defs
>"<clipPath id="cut-off-right
><rect x="0" y="0" width="100" height="200" /
></clipPath
></defs
></svg
التنفيذ
<defs>
<clipPath id="cut-off-left">
<circle cx=110 cy=100 r=100 />
</clipPath>
</defs>
</svg>
التنفيذ
، بعد الفهم بفضل اهلل،ومن هنا يتبين لك أنك تستطيع التجارب الكثيرة
فتقطع ما تريد، داخل مساحة القطعpath حيث يمكن ان تقوم بتكوين
بل وحتى لو كان عندك تمارين أو تجارب سواء كانت في،من أي مكان
. تستطيع تكوينها بفضل اهلل،العمل او أكاديمية
PAGE 154
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
استخدام Close Path
تعلمنا فيما سبق بفضل اهلل أنه عند رسم pathيكون كالكود التالي:
>"<svg height="550" width="620
></svg
التنفيذ
وهنا نالحظ أننا رسمنا خطين من ثالث خطوط للشكل المثلث ،ولكن لم
نغلق المسار ، pathمع العلم أننا يمكننا فعل ذلك كما فعلنا من قبل،
ولكن انتبه! فهذا الموضوع أيسر بكثير من الذي تفكر فيه ،وال يحتاج الى
مجهود ،ويعتبر أسهل شيء في الوسم pathعلى االطالق ،وهو أمر
اغالق المسار Close-Pathولغل المسار نستخدم Zاو zلنفس
الهدف ،وهو اغالق المسار ،ولتوضيح ذلك سنقوم بإغالق الـ pathلما
سبق في المثال التالي:
</svg>
التنفيذ
PAGE 156
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
تكرار النقاط
عند العمل مع الوسم pathيمكنك تكرار القيم مثل المثال التالي:
الكود
>"<svg height="550" width="620
<path d="M 10,200 l 200,0 -100,-190 Z" stroke=red stroke-
>width=3 fill=#FF0 /
></svg
التنفيذ
وهنا الحظ أن الخط تم إنشاؤه بشكل طبيعي بدون حرف lوذلك نسبة الى
ما قبله ،أي بدالً أن نكتب في خاصية dالقيمة التالية:
M 10,200 l 200,0 l -100,-190 Z
كتبنا بدالً من ذلك القيمة التالية:
M 10,200 l 200,0 -100,-190 Z
فأصبح وكأنه اختصار.
PAGE 158
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
ويمكن أيضاً فعل ذلك مع األوامر األخرى ،فمثالً تابع الكود التالي:
>"<svg height="550" width="620
></svg
التنفيذ
وهكذا ،للتسهيل أثناء عملك ،ولكن انتبه! فطريقة التنظيم أفضل لك في
الكتابة والمراجعة والتعديل والتوثيق ،ألن التنظيم مهم.
التنفيذ
PAGE 160
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
path مثال قلب بالوسم
الكود
<svg height="650" width="1200">
<defs>
<linearGradient id="myGradient">
<stop offset="21%" stop-color="#CF0" />
<stop offset="49%" stop-color="#CFC" />
<stop offset="81%" stop-color="#CF0" />
</linearGradient>
</defs>
</svg>
التنفيذ
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(20)">
<stop offset="21%" stop-color="navy" />
<stop offset="49%" stop-color="lightblue" />
<stop offset="81%" stop-color="navy" />
</linearGradient>
</defs>
</svg>
التنفيذ
PAGE 162
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم textPath
وهو أن تصنع pathخاص بك وتجعل الكالم يمشي عليه ،وسنجرب
بالكود التالي:
>"<svg height="550" width="620
></svg
التنفيذ
<g>
<rect width=100 height=100 fill=#0F0 />
<circle cx=50 cy=50 r=40 fill=#FF0 />
</g>
</svg>
التنفيذ
PAGE 164
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
والوسم gيساعدك في أشياء كثيرة ،فمثالً إذا وضعت عناصر ليس لها
fillثم حددت fillمعين للوسم gستأخذ كل العناصر الغير محدد لها
لون هذا الـ ،fillوسنجرب بالمثال التالي:
الكود
> "<svg width="500" height="500
><g fill=red
><rect width=100 height=100 fill=#0F0 /
><circle cx=50 cy=50 r=40 fill=#FF0 /
><circle cx=50 cy=50 r=20 /
><circle cx=70 cy=70 r=10 /
></g
></svg
التنفيذ
الحظ أن الدائرتين الغير مخصص fillلهم أخذوا اللون األحمر الذي تم
تحديده للوسم gبسهولة ،وكذلك باقي الخصائص المتوافقة بفضل اهلل.
<defs>
<g fill=red id="my" >
<rect width=100 height=100 fill=#0F0 />
<circle cx=50 cy=50 r=40 fill=#FF0 />
<circle cx=50 cy=50 r=20 />
<circle cx=70 cy=70 r=10 />
</g>
</defs>
PAGE 166
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 168
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم feFlood
يمأل الوسم feFloodمنطقة التصفية ويؤثر عليها على أساس
الخصائص التي تم ضبطها له ،ولنري أثر هذه التصفية ،سنصمم مربع
بخصائص ،ثم نؤثر عليه بخصائص أخري ،أوالً المربع بالكود التالي:
>"<svg height="500" width="500
<rect x=10 y=10 width=200 height=200 fill=red >/
></svg
التنفيذ
<defs>
<filter id="floodFilter" filterUnits="userSpaceOnUse">
<feFlood x="50" y="50" width="100" height="100"
flood-color="blue" flood-opacity="0.5"/>
</filter>
</defs>
</svg>
التنفيذ
PAGE 170
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
feBlend الوسم
، يقوم بتكوين كائنين معاً يحكمهما وضع مزج معينfeBlend الوسم
،وهذا يشبه ما هو معروف في برامج تحرير الصور عند مزج طبقتين
:[4]وسنجرب بالمثال التالي
الكود
<svg width="200" height="200" >
<defs>
<filter id="spotlight">
<feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
flood-color="green" flood-opacity="1" />
<feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
</filter>
</defs>
<image
href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
x="10%" y="10%" width="80%" height="80%"
style="filter:url(#spotlight);"/>
</svg>
التنفيذ
<defs>
<g id="circles">
<circle cx="30" cy="30" r="20" fill="blue"
fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green"
fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red"
fill-opacity="0.5" />
</g>
</defs>
<use href="#circles" />
<filter id="colorMeMatrix">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
</svg>
PAGE 172
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
الحظ ،تم عرضهم اللون الطبيعي ،ثم بعد التأثير كانت المصفوفة اللونية
صاحبة استحواذ أخضر ،حيث تم استخدامها ،فظهر تأثيرها.
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</svg>
التنفيذ
><defs
>"<filter id="shadow
><feDropShadow dx="1.2" dy="1.4" stdDeviation="5.5"/
></filter
></defs
></svg
التنفيذ
الوسم feComponentTransfer
هو يقوم بإعادة تعيين للون بمكونات األلوان لكل بكسل ،وتسمح بعمليات
مثل ضبط السطوع ،وضبط التباين ،وتوازن اللون أو العتبة .ونستخدم فيه
الوسوم .feFuncR, feFuncG, feFuncB, feFuncA
الوسم feComposite
هو ينفذ الجمع بين صورتين من الصور المدخلة pixel-wiseفي
مساحة الصورة باستخدام أحدي عمليات التركيب الخاصة.
الوسم feConvolveMatrix
يطبق مصفوفة االلتواء بمرشح تاثير ،حيث يجمع التواء بين البيكسالت في
صوره اإلدخال باستخدام البيكسالت المجاورة إلنتاج صوره ناتجه.
PAGE 176
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم feDisplacementMap
يستخدم قيم البيكسل من الصورة من in2إلزاحة الصورة من الداخل.
الوسم feImage
يقوم بدفع بيانات الصورة من مصدر خارجي ويوفر بيانات البكسل كإخراج،
بمعنى أنه إذا كان المصدر الخارجي صورة ،SVGفإنه يتم تنقيطها.
الوسم feMerge
يسمح وسم feMergeبتطبيق تأثيرات تصفية بشكل متزامن بدال من
التسلسل ،ونستخدم معه الوسم .feMergeNode
الوسم feMorphology
يستخدم لمحو أو توسيع صورة اإلدخال ،وتكمن فائدته في تأثيرات التثقيل
أو التخفيف.
الوسم feOffset
يقوم بعمل تعويض لصورة اإلدخال ،بحيث يتم تعويض صورة اإلدخال ككل
بالقيم المحددة في الخصائص dxو.dy
feSpecularLighting الوسم
والصورة الناتجة،يضيء مصدر الرسم باستخدام قناة ألفا كخريطة اظهار
ونستخدم معه الوسم، بناءً على لون الضوءRGBA هي صورة
.feDistantLight والوسمfeSpotLight والوسمfePointLight
feTile الوسم
وهذا،يقوم بملء مستطيل مستهدف بنمط متكرر من النقشة لصورة إدخال
.pattern التأثير مشابه جداً لتأثير الـ
feTurbulence الوسم
. وكأن بها غيوم أو كأنها قطعة رخام،ينشئ صورة مشوشة
PAGE 178
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
باختصار ،هو صندوق خاص بك ،وكأنه لوحة رسم لتنفيذ العمل الفني من
رسم ،وتخطيط ،وضبط.
<g fill=red>
<rect width=100 height=100 fill=#0F0 />
<circle cx=50 cy=50 r=40 fill=#FF0 />
<circle cx=50 cy=50 r=20 />
<circle cx=70 cy=70 r=10 />
</g>
</svg>
التنفيذ
انتبه! مع تحديد المساحة التي تريد والتي سوف تعمل عليها لتتجاوب مع
.احتياجاتك وابعادك كلها
PAGE 180
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
واآلن انتبه! ألننا سنكبر المتصفح بدون أي تغير والحظ ما سيحدث:
symbol الوسم
لتحديد كائنات القوالب الرسومية التيsymbol يتم استخدام الوسم
حيث نرسم به،use يمكن إنشاء مثيل لها أكثر من مرة بواسطة الوسم
:[4] ولتجربته يمكن رؤية الكود التالي، ثم نستخدمهid ونعطيه
<svg viewBox="0 0 80 20" >
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20
M70,0 v20" fill="none" stroke="#99F" />
</svg>
التنفيذ
PAGE 182
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
switch الوسم
:[4] وسنجرب بالكود التالي،هو يجعلك ترسم بشرط معين
<svg viewBox="0 -20 100 50">
<switch>
<text systemLanguage="ar"><مرحبا/text>
<text systemLanguage="de,nl">Hallo!</text>
<text systemLanguage="en-us">Howdy!</text>
<text systemLanguage="en-gb">Wotcha!</text>
<text systemLanguage="en-au">G'day!</text>
<text systemLanguage="en">Hello!</text>
<text systemLanguage="es">Hola!</text>
<text systemLanguage="fr">Bonjour!</text>
<text systemLanguage="ja">こんにちは</text>
<text systemLanguage="ru">Привет!</text>
<text>☺</text>
</switch>
</svg>
التنفيذ
pattern الوسم
فهو يجعلك تقوم بعمل النقشة التي، واضح من اسمهpattern الوسم
: وسنتعرف عليه بالكود التالي،تريدها
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,10,10"
width="10%" height="10%">
<polygon points="0,5 5,0 10,10" fill="#CC0" />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 184
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الحظ أنه تم تكوين شكل بسيط وتم تكراره ،ثم تم استخدامه كتعبئة ،fill
وهنا الحظ أن الـ widthوالـ heightتم ضبطهم على ،%10
وهذا هو الذي يجعلها بهذا الحجم ،وسنجرب %5بالكود التالي:
>"<svg width="300" height="300
><defs
"<pattern id="p1" viewBox="0,0,10,10
>"width="5%" height="5%
><polygon points="0,5 5,0 10,10" fill="#CC0" /
></pattern
></defs
></svg
التنفيذ
</defs>
<circle cx=100 cy=100 r=70
fill="url(#p1)" stroke="url(#p2)" stroke-width=7
/>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,10,10"
width="10%" height="10%">
<line x1=0 y1=10 x2=10 y2=0 stroke=#CC0 />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,10,10"
width="10%" height="10%">
<line x1=0 y1=10 x2=10 y2=0 stroke=#CC0 />
<line x1=5 y1=5 x2=10 y2=10 stroke=#CC0 />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 188
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,10,10"
width="10%" height="10%">
<line x1=0 y1=10 x2=10 y2=10 stroke=#CC0 />
<line x1=5 y1=10 x2=5 y2=0 stroke=#CC0 />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<line x1=0 y1=10 x2=10 y2=10 stroke=#CC0 />
<line x1=5 y1=10 x2=5 y2=0 stroke=#CC0 />
<line x1=0 y1=20 x2=10 y2=20 stroke=#CC0 />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 190
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<line x1=0 y1=10 x2=10 y2=10 stroke=#CC0 />
<line x1=5 y1=10 x2=5 y2=0 stroke=#CC0 />
<line x1=0 y1=20 x2=10 y2=20 stroke=#CC0 />
<line x1=5 y1=20 x2=5 y2=0 stroke=#CC0 />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,10,21"
width="10%" height="10%">
<line x1=0 y1=10 x2=10 y2=10 stroke=#CC0 />
<line x1=1 y1=10 x2=1 y2=0 stroke=#CC0 />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 192
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<line x1=0 y1=10 x2=20 y2=10 stroke=#00C />
<line x1=1 y1=10 x2=1 y2=0 stroke=#00C />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,20,20"
width="10%" height="10%">
<line x1=0 y1=9 x2=20 y2=9 stroke=#C45 />
<line x1=1 y1=10 x2=1 y2=0 stroke=#C45 />
<line x1=0 y1=19 x2=20 y2=19 stroke=#C45 />
<line x1=9 y1=10 x2=9 y2=20 stroke=#C45 />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 194
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,10,10"
width="5%" height="5%">
<circle cx=5 cy=5 r=2 fill=none stroke=#E00 />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,60,75"
width="15%" height="15%">
<circle cx=30 cy=30 r=20 fill=none stroke=#900 />
<circle cx=20 cy=50 r=20 fill=none stroke=#900 />
<circle cx=40 cy=50 r=20 fill=none stroke=#900 />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 196
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,20,15"
width="10%" height="10%">
<path d="M 0,10 Q 5,3 10,10 t 10,0 t 10,0"
stroke=#55A fill=none />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,20,15"
width="10%" height="10%">
<path d="M 0,10 Q 5,3 10,10 t 10,0 t 10,0"
stroke=#55A fill=none />
<line x1=5 y1=-2 x2=5 y2=17 stroke=#55A />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 198
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,20,15"
width="10%" height="10%">
<path d="M 0,10 Q 5,3 10,10 t 10,0 t 10,0"
stroke=#A55 fill=none />
<line x1=0 y1=6 x2=20 y2=6 stroke=#A55 />
<line x1=0 y1=14 x2=20 y2=14 stroke=#A55 />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<path d="M 5,0 Q 0,10 5,20 "
stroke=#5A5 fill=none />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 200
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<path d="M 5,0 Q 0,10 5,20 Q 10,0 5,20"
stroke=#5A5 fill=none />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<path d="M 5,0 Q 0,10 5,20 M 5,0 Q 10,10 5,20"
stroke=#5A5 fill=none />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 202
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:سنجرب نقش آخر بالمثال التالي
الكود
<svg width="300" height="300">
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<path d="M 5,0 Q 0,10 5,20 M 5,0 Q 10,10 5,20"
stroke=#55A fill=none />
<line x1=0 y1=19 x2=10 y2=19 stroke=#55A />
</pattern>
</defs>
</svg>
التنفيذ
<defs>
<pattern id="p1" viewBox="0,0,10,20"
width="10%" height="10%">
<path d="M 5,0 Q 0,10 5,20 M 5,0 Q 10,10 5,20"
stroke=#55A fill=none />
<line x1=-5 y1=19 x2=15 y2=19 stroke=#55A />
</pattern>
</defs>
</svg>
التنفيذ
PAGE 204
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم marker
هذا وسم رائع لإلشارات ،ويعمل بشكل تلقائي رائع ،حيث يتم استخدامه في
وضع اإلشارات على رؤوس األشكال مثل الخطوط والمضلعات واألشكال
المختلفة التي تشبههم ،وسنجرب بالكود التالي:
الكود
>"<svg width="300" height="300
><defs
"<marker id="dot" viewBox="0 0 10 10
"refX="5" refY="5
>"markerWidth="5" markerHeight="5
><circle cx="5" cy="5" r="5" fill="blue" /
></marker
></defs
<defs>
<marker id="dot" viewBox="0 0 10 10"
refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="blue" />
</marker>
</defs>
</svg>
التنفيذ
PAGE 206
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
<defs>
<marker id="dot" viewBox="0 0 10 10"
refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="blue" />
</marker>
</defs>
</svg>
التنفيذ
PAGE 208
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم mask
بهذا الوسم يمكن عمل ،maskبحيث يعطي شكل آخر ،ولتوضيح عمله
سوف نرسم دائرة ومضلع عاديين بالكود التالي]:[4
>"<svg viewBox="-10 -10 120 120
><polygon points="-10,110 110,110 110,-10" fill="orange" /
><circle cx="50" cy="50" r="50" fill=#A00 /
></svg
التنفيذ
PAGE 210
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وكما نالحظ أنه تم قص قلب من داخل الدائرة عن طريق الـ .mask
واآلن سنفصل جزء ،جزء ،في نقاط بفضل اهلل كما يلي:
• تم عمل مضلع ودائرة
• تم عمل maskوتسميته myMask
• تم تطبيق الـ maskعلى الدائرة فقط
• تم عمل مستطيل بنفس حجم الدائرة باللون األبيض ،ليتم بقاء الدائرة
• تم عمل مسار pathعلى شكل قلب باللون األسود ،ليتم حذف جزء
الـ pathفقط
Animate الوسم
وهي تشبه ما فعلناه،هو وسم يمكنك من إنشاء حركة مرئية على العناصر
حيث أنك تتحكم في قيم الخصائص مع الحركة،css من قبل في لغة الـ
: وسنجرب بالكود التالي،ووقت الحركة
<svg width="500" height="500" >
<rect x=10 y=10 width=200 height=100 >
<animate attributeType="XML" attributeName="width"
from="0" to="200"
dur="10s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="fill"
from="red" to="blue"
dur="1s" repeatCount="indefinite"/>
</rect>
</svg>
: وللتوضيح سنعرض التنفيذ المتعدد كالتالي،انتبه! ألن التنفيذ حركي
1التنفيذ
2التنفيذ
3التنفيذ
PAGE 212
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ4
التنفيذ5
</circle>
</svg>
1التنفيذ
PAGE 214
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ2
التنفيذ3
وبعدها سيرجع مرة أخري ،ألننا قمنا بعمل حركة منتظمة تسلسلية ،تبدأ
من قيمة ،ثم تزيد ،ثم تنتهي عند نفس قيمة البداية ،وبذلك تستطيع التنويع
كما تحب في الحركات.
animateMotion الوسم
وكأنها، آخر بالحركةpath يلتف حولpath هذا الوسم يجعلك تجعل
:[4] وسنجرب ذلك بالكود التالي،رسوم كرتونية
<svg width="100%" height="100%" viewBox="0 0 500 300" >
</svg>
PAGE 216
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ1
التنفيذ2
التنفيذ3
4التنفيذ
5التنفيذ
PAGE 218
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وكما نالحظ أن الـ pathالمرسوم على شكل مثلث يدور حول الـ
pathاآلخر من أوله إلى آخره ،دوران ال نهائي ،وسنوضح كالتالي:
</svg>
PAGE 220
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ1
التنفيذ2
وهكذا سيدور المثلث حول المسار ،ولو جعلنا خاصية durعلى القيمة
60sسيلتف في دقيقة مثل عقرب ثانية الساعة.
1التنفيذ
2التنفيذ
الوسم animateTransform
هذا الوسم يمكنك من جعل الشكل يدور حول نفسه ،ولتجربه هذه العملية
يجب ان نرسم شكل يظهر عليه الدوران مثل المربع او المستطيل او المثلث،
وسنجرب بالكود التالي]:[4
>"<svg width="120" height="120" viewBox="0 0 120 120
<polygon points=" 30,9060,30 90,90 " fill=lime
>stroke=#00F stroke-width=2
"<animateTransform attributeName="transform
"attributeType="XML
"type="rotate
"from="0 60 70
"to="360 60 70
"dur="10s
>repeatCount="indefinite"/
></polygon
></svg
واآلن انتبه! ألن التنفيذ حركي ،ولتوضيح ذلك في الكتاب سنعرض التنفيذ
المتعدد لحركات مختلفة من التشغيل كما يلي:
2التنفيذ
3التنفيذ
PAGE 224
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
وهكذا ،يستمر في الدوران حول نفسه الى ما النهاية ،وسنوضح المثال
السابق في النقاط التالية:
التنفيذ2
وهكذا ،يكبر وصغر ،وبفضل اهلل بعد أن فهمت جيداً ،يمكنك تجربة
اإلمكانيات األخرى
بعد ذلك يمكن وضع بعض المعلومات والتوثيق عن الملف في تعليقات ،مثل
"من أنشأ هذا الملف" ومثل "تاريخ االنشاء" ،الى هذه األمور ،ومثال
على ذلك في سطر الكود التالي:
><!-- Created by: Hassouna Academy --
PAGE 228
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
بعد ذلك نبدأ في بنية الرسم باستخدام الـ SVGعن طريق كتابة الوسم
svgاألساسي ،والذي تستخدمه كحاوية للرسومات الخاصة بك ،كما
تعلمنا من قبل ،ومثال على ذلك سطر الكود التالي:
>"<svg version="1.1
وكما نالحظ ان الخاصية versionإلصدار الـ svgتم ضبطها على
القيمة 1.1كإشارة إلصدار الـ ،svgوبالنسبة للخصائص مثل التالي:
"xmlns="http://www.w3.org/2000/svg
"xmlns:xlink="http://www.w3.org/1999/xlink
هي تكون أيضاً في الوسم svgوهي اختيارية في HTML5ولكن عند
عمل ملف svgمنفصل قم بوضعها ،وهي لتحديد امتداد األسماء
namespaceللـ xmlالمتبع ،والـ svgالمتبع.
</g>
</svg>
وقمنا،وكما نالحظ أن هذه األكواد سهلة علينا بفضل اهلل ألننا تعلمناها
واآلن سنستخدمه استخدامات مختلفة الحجم في ملف،بإنشائها من قبل
:ويب عادي كما يلي
PAGE 230
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: كما يليtest.html واآلن قم بكتابة الكود التالي في ملف الويب
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
img{ border: 3px dashed green; }
</style>
</head>
<body>
<img src="test.svg" width=300 height=300 />
<img src="test.svg" width=250 height=250 />
<br>
<img src="test.svg" width=200 height=200 />
<img src="test.svg" width=150 height=150 />
<img src="test.svg" width=100 height=100 />
<img src="test.svg" width=70 height=70 />
</body>
</html>
التنفيذ
<!--top-->
<polygon fill=#111 points="120,24 370,24 270,120 20,120" />
<polygon fill=#AAA points="125,35 340,35 260,110 50,110" />
<!--front-->
<polygon fill=#222 points="18,120 270,120 270,366 20,365" />
<polygon fill=gold points="18,165 270,165 270,200 20,200" />
<!--side-->
<polygon fill=#000 points="270,120 370,24 370,268 270,365" />
<polygon fill=gold points="270,165 370,69 370,103 270,200" />
<polygon fill=gold points="300,230 320,214 320,318 300,335" />
</svg>
</body>
</html>
PAGE 232
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
</svg>
PAGE 234
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
<symbol id="part1">
<polygon points="0,0 100,0 80,50 20,50" fill="#642" />
</symbol>
<use href="#part1"
x="5" y="5" width=200 height=100 />
</svg>
التنفيذ
PAGE 236
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:واآلن سنرسم ورقة النخلة بالكود التالي
<svg width=500 height=500>
<symbol id="part2">
<path d="M 25,0 Q 0,100 25,200 z" stroke="darkgreen"
fill="#1A1" />
<path d="M 25,0 Q 50,100 25,200 z" stroke="darkgreen"
fill="#1A1" />
</symbol>
<use href="#part2"
x="5" y="5" width=100 height=300 />
</svg>
التنفيذ
<symbol id="part1">
<polygon points="0,0 100,0 80,50 20,50" fill="#642" />
</symbol>
<symbol id="part2">
<path d="M 25,0 Q 0,100 25,200 z" stroke="darkgreen" fill="#1A1" />
<path d="M 25,0 Q 50,100 25,200 z" stroke="darkgreen" fill="#1A1" />
</symbol>
</svg>
PAGE 238
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
PAGE 240
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: كالتاليpalm.svg باسمsvg واآلن سنضع كود النخلة بملف
<?xml version="1.0" encoding="utf-8"?>
<!-- Created by: Hassouna Academy -->
<svg viewBox="-15 0 350 500"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<symbol id="part1">
<polygon points="0,0 100,0 80,50 20,50" fill="#642" />
</symbol>
<symbol id="part2">
<path d="M 25,0 Q 0,100 25,200 z" stroke="darkgreen" fill="#1A1" />
<path d="M 25,0 Q 50,100 25,200 z" stroke="darkgreen" fill="#1A1" />
</symbol>
</svg>
PAGE 242
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
</svg>
على متصفح الويب سيفتح ويعرضsvg معروف أنك إذا فتحت الملف
ولكننا سنجرب على ملف،لك التصميم إذا كانت األكواد من الداخل صحيحة
.SVG الموجود مع الـimage وسنجرب الوسم،html ويب
PAGE 244
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: كما يليtest.html واآلن كود ملف
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
</style>
</head>
<body>
<image href="pyramid.svg"
width="90%" height="90%" x="10" y="39" />
<image href="pyramid.svg"
width="70%" height="70%" x="250" y="120" />
<image href="pyramid.svg"
width="50%" height="50%" x="450" y="200" />
</svg>
</body>
</html>
PAGE 246
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
رسم وجه متحرك العينين
</svg>
التنفيذ
PAGE 248
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: فيتم التعديل للكود التالي،جعل العين متحركة .3
<svg width="500" height="450" >
<!--Eye Symbol-->
<symbol id="eye" viewBox="0 0 100 100">
<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
stroke="#000" stroke-width="3" fill="#DDD" />
<circle cx="50" cy="50" r="15" fill="lightblue"
stroke="#584614" stroke-width="3">
<animate attributeType="XML" attributeName="cx" dur="3s"
values="30;50;70;50;30" repeatCount="indefinite" />
</circle>
</symbol>
<use href="#eye" />
</svg>
1التنفيذ
2التنفيذ
3التنفيذ
<!--Eye Symbol-->
<symbol id="eye" viewBox="0 0 100 100">
<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
stroke="#000" stroke-width="3" fill="#DDD" />
<circle cx="50" cy="50" r="15" fill="url('#eyeGradient')"
stroke="#584614" stroke-width="3">
<animate attributeType="XML" attributeName="cx" dur="3s"
values="30;50;70;50;30"
repeatCount="indefinite" />
</circle>
</symbol>
<!--Eyes-->
<use href="#eye" x="122" y="195" width="140" height="70" />
<use href="#eye" x="242" y="195" width="140" height="70" />
</svg>
PAGE 250
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ1
التنفيذ2
التنفيذ
PAGE 252
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:رسم الفم بالكود التالي .6
<svg width="500" height="450" >
<!--Mouth Symbol-->
<symbol id="mouth" viewBox="0 0 600 400">
<path d="M10,100 Q280,360 590,100 Q280,460 10,100"
fill="#b29358" />
</symbol>
<use href="#mouth" x="170" y="320" width="150" height="75" />
</svg>
التنفيذ
PAGE 254
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
رسم شعر يتناسب مع الوجه بالكود المعدل التالي: .8
> "<svg width="500" height="450
"<ellipse cx="250" cy="250" rx="150" ry="200
>fill="#d0cb8e"/
<path d="M120,170 Q10,250 50,150 Q10,50 150,50
Q200,-20 300,60 Q350,-10 400,120
"Q550,160 390,200 Q200,50 120,170 z
>fill="#000" /
></svg
التنفيذ
<!--Eye Gradient-->
<defs>
<radialGradient id="eyeGradient">
<stop offset="10%" stop-color="#ded4b8" />
<stop offset="30%" stop-color="#7e6318" />
<stop offset="50%" stop-color="#584614" />
<stop offset="65%" stop-color="#584614" />
<stop offset="95%" stop-color="#584614" />
</radialGradient>
</defs>
<!--Eye Symbol-->
<symbol id="eye" viewBox="0 0 100 100">
<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
stroke="#000" stroke-width="3" fill="#DDD" />
<circle cx="50" cy="50" r="15" fill="url('#eyeGradient')"
stroke="#584614" stroke-width="3">
<animate attributeType="XML" attributeName="cx" dur="3s"
values="30;50;70;50;30" repeatCount="indefinite" />
</circle>
</symbol>
<!--Empty Face-->
<ellipse cx="250" cy="250" rx="150" ry="200"
fill="#d0cb8e"/>
<!--Hair-->
<path d="M120,170 Q10,250 50,150 Q10,50 150,50
Q200,-20 300,60 Q350,-10 400,120
Q550,160 390,200 Q200,50 120,170 z" fill="#000" />
<!--Eyes-->
<use href="#eye" x="122" y="195" width="140" height="70" />
<use href="#eye" x="242" y="195" width="140" height="70" />
</svg>
PAGE 256
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
PAGE 258
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
<!--Eye Symbol-->
<symbol id="eye" viewBox="0 0 100 100">
<path d="M 0,50 Q 50,0 100,50 q -50,50 -100,0 "
stroke="#000" stroke-width="3" fill="#DDD" />
<circle cx="50" cy="50" r="15" fill="url('#eyeGradient')"
stroke="#584614" stroke-width="3">
<animate attributeType="XML" attributeName="cx" dur="3s"
values="30;50;70;50;30" repeatCount="indefinite" />
</circle>
</symbol>
<!--Nose Symbol-->
<symbol id="nose" viewBox="0 0 260 260">
<path d="M96,228 Q61,239 60,215 Q50,180 86,149
Q84,88 102,39 Q129,-30 157,38
Q180,86 172,149 Q209,175 194,215
Q196,235 163,227 Q128,257 96,228"
fill="#c3bd79" stroke="#a7a057" />
<ellipse cx="85" cy="205" rx="22" ry="15" fill="#39350e" />
<ellipse cx="170" cy="205" rx="22" ry="15" fill="#39350e" />
<ellipse cx="85" cy="210" rx="22" ry="13" fill="#58542d" />
<ellipse cx="170" cy="210" rx="22" ry="13" fill="#58542d" />
</symbol>
<!--Mouth Symbol-->
<symbol id="mouth" viewBox="0 0 600 400">
<path d="M10,100 Q280,360 590,100 Q280,460 10,100"
fill="#b29358" />
</symbol>
PAGE 260
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
<!--Empty Face-->
<ellipse cx="250" cy="250" rx="150" ry="200"
fill="#d0cb8e"/>
<!--Hair-->
<path d="M120,170 Q10,250 50,150 Q10,50 150,50
Q200,-20 300,60 Q350,-10 400,120
Q550,160 390,200 Q200,50 120,170 z" fill="#000" />
<!--Eyebrows-->
<path d="M150,210 q 45,-35 90,0" fill="none"
stroke="#000" stroke-width="3"/>
<path d="M270,210 q 45,-35 90,0" fill="none"
stroke="#000" stroke-width="3"/>
<!--Eyes-->
<use href="#eye" x="122" y="195" width="140" height="70" />
<use href="#eye" x="242" y="195" width="140" height="70" />
<!--Nose-->
<use href="#nose" x="200" y="230" width="100" height="100"/>
<!--Mouth-->
<use href="#mouth" x="170" y="320" width="150" height="75" />
</svg>
PAGE 262
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
رسم سفينة
.1سأرسم السفينة بيدي لتكون مثل الشكل التالي:
PAGE 264
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:وضع السفينة خلف الموج بالكود التالي .3
<svg width="840" height="600" >
<!--Ship-->
<path d="M620,550 Q700,400 680,320
Q450,450 260,330
Q230,380 140,340
Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
</svg>
التنفيذ
<!--Ship-->
<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
<!--Sail-->
<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
</svg>
PAGE 266
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
</svg>
التنفيذ
PAGE 268
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:وضع أجزاء الشراع اليمني خلف الشراع بالكود التالي .6
<svg width="840" height="600" >
<!--Ship-->
<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
<!--Sail Parts-->
<use href="#sail" width="70" height="70" x="285" y="30" />
<use href="#sail" width="100" height="100" x="280" y="80" />
<use href="#sail" width="120" height="120" x="290" y="150" />
<use href="#sail" width="120" height="120" x="310" y="220" />
<!--Sail-->
<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
</svg>
PAGE 270
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:انشاء رمز جزء الشعار اليساري بالكود التالي .7
<svg width="840" height="600" >
</svg>
التنفيذ
<!--Ship-->
<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
<!--Sail Parts-->
<use href="#sail1" width="70" height="70" x="285" y="30" />
<use href="#sail1" width="100" height="100" x="280" y="80" />
<use href="#sail1" width="120" height="120" x="290" y="150" />
<use href="#sail1" width="120" height="120" x="310" y="220" />
PAGE 272
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
<use href="#sail2" width="70" height="70" x="220" y="30" />
<use href="#sail2" width="100" height="100" x="180" y="80" />
<use href="#sail2" width="120" height="120" x="140" y="150" />
<use href="#sail2" width="120" height="120" x="110" y="220" />
<!--Sail-->
<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
</svg>
التنفيذ
PAGE 274
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: وضع البشرى على السفينة فيكون الكود كالتالي.10
<svg width="840" height="600" >
<!--Human Symbol-->
<symbol id="human" viewBox="0 0 51 150">
<line x1="25" y1="49" x2="25" y2="100"
stroke="#000" stroke-width="3" />
<path d="M0,150 L25,100 L50,150" fill="none"
stroke="#000" stroke-width="3" />
<path d="M0,80 L25,60 L50,80" fill="none"
stroke="#000" stroke-width="3" />
<circle cx="26" cy="26" r="25" fill="#c7c757" stroke="#000" />
</symbol>
<!--Ship-->
<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
<!--Sail Parts-->
<use href="#sail1" width="70" height="70" x="285" y="30" />
<use href="#sail1" width="100" height="100" x="280" y="80" />
<use href="#sail1" width="120" height="120" x="290" y="150" />
<use href="#sail1" width="120" height="120" x="310" y="220" />
<!--Sail-->
<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
</svg>
PAGE 276
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
<!--Human Symbol-->
<symbol id="human" viewBox="0 0 51 150">
<line x1="25" y1="49" x2="25" y2="100"
stroke="#000" stroke-width="3" />
<path d="M0,150 L25,100 L50,150" fill="none"
stroke="#000" stroke-width="3" />
<path d="M0,80 L25,60 L50,80" fill="none"
stroke="#000" stroke-width="3" />
<circle cx="26" cy="26" r="25" fill="#c7c757" stroke="#000" />
</symbol>
PAGE 278
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
<!--Human-->
<use href="#human" width="40" height="120" x="595" y="245" />
<path d="M565,310 l160,-5" stroke="#00A" stroke-width="3" />
<path d="M725,305 v250" stroke="#AAA" />
<circle cx="635" cy="310" r="7" fill="#00F" />
<!--Ship-->
<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
<!--Sail Parts-->
<use href="#sail1" width="70" height="70" x="285" y="30" />
<use href="#sail1" width="100" height="100" x="280" y="80" />
<use href="#sail1" width="120" height="120" x="290" y="150" />
<use href="#sail1" width="120" height="120" x="310" y="220" />
<!--Sail-->
<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
</svg>
PAGE 280
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: وضع الشمس باألعلى فيكون الكود كالتالي.12
<svg width="840" height="600" >
<!--Human Symbol-->
<symbol id="human" viewBox="0 0 51 150">
<line x1="25" y1="49" x2="25" y2="100"
stroke="#000" stroke-width="3" />
<path d="M0,150 L25,100 L50,150" fill="none"
stroke="#000" stroke-width="3" />
<path d="M0,80 L25,60 L50,80" fill="none"
stroke="#000" stroke-width="3" />
<circle cx="26" cy="26" r="25" fill="#c7c757" stroke="#000" />
</symbol>
<!--Human-->
<use href="#human" width="40" height="120" x="595" y="245" />
<path d="M565,310 l160,-5" stroke="#00A" stroke-width="3" />
<path d="M725,305 v250" stroke="#AAA" />
<circle cx="635" cy="310" r="7" fill="#00F" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
<!--Sail Parts-->
<use href="#sail1" width="70" height="70" x="285" y="30" />
<use href="#sail1" width="100" height="100" x="280" y="80" />
<use href="#sail1" width="120" height="120" x="290" y="150" />
<use href="#sail1" width="120" height="120" x="310" y="220" />
<!--Sail-->
<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
<!--Sun-->
<circle cx="755" cy="75" r="70" fill="yellow" stroke="orange" />
</svg>
PAGE 282
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
<use href="#bird"/>
</svg>
التنفيذ
PAGE 284
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: فيكون الكود النهائي للسفينة كالتالي، وضع الطيور.14
<svg width="840" height="600" >
<!--Human Symbol-->
<symbol id="human" viewBox="0 0 51 150">
<line x1="25" y1="49" x2="25" y2="100"
stroke="#000" stroke-width="3" />
<path d="M0,150 L25,100 L50,150" fill="none"
stroke="#000" stroke-width="3" />
<path d="M0,80 L25,60 L50,80" fill="none"
stroke="#000" stroke-width="3" />
<circle cx="26" cy="26" r="25" fill="#c7c757" stroke="#000" />
</symbol>
<!--Bird Symbol-->
<symbol id="bird" viewBox="0 0 150 50">
<path d="M0,50 Q35,0 75,30 Q110,0 150,50"
fill="none" stroke="#00D" />
</symbol>
<!--Ship-->
<path d="M620,550 Q700,400 680,320 Q450,450 260,330
Q230,380 140,340 Q150,460 270,550"
fill="#716626" stroke="#4e4509" stroke-width="3" />
<path d="M260,330 Q220,460 380,550"
fill="none" stroke="#4e4509" stroke-width="3" />
<!--Sea-->
<path d="M 0,500 Q 50,450 100,500 t 100,0 t 100,0 t 100,0
t 100,0 t 100,0 t 100,0 t 100,0 t 100,0 v 100 H 0"
stroke="#2293b5" stroke-width=3 fill="#4fafcc" />
<!--Sail Parts-->
<use href="#sail1" width="70" height="70" x="285" y="30" />
<use href="#sail1" width="100" height="100" x="280" y="80" />
<use href="#sail1" width="120" height="120" x="290" y="150" />
<use href="#sail1" width="120" height="120" x="310" y="220" />
<!--Sail-->
<path d="M350,300
Q340,390 260,310
Q190,390 180,300
Q250,208 293,14
Q310,208 350,300"
stroke="#62848e" stroke-width=3 fill="#839aa0"/>
<!--Sun-->
<circle cx="755" cy="75" r="70" fill="yellow" stroke="orange" />
PAGE 286
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
<!--Birds-->
<use href="#bird" width="60" height="20" x="500" />
<use href="#bird" width="60" height="20" x="400" />
<use href="#bird" width="60" height="20" x="450" y="50" />
<use href="#bird" width="60" height="20" x="375" y="50" />
<use href="#bird" width="60" height="20" x="525" y="50" />
</svg>
التنفيذ
<!--X,Y Axises-->
<path d="M100,100 v400 h600"
fill="none" stroke="#000" stroke-width="3" />
</svg>
التنفيذ
PAGE 288
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:إضافة خطوط اشارات للمحور الرأسي فيكون الكود كالتالي .2
<svg width="800" height="600" >
<!--X,Y Axises-->
<path d="M100,100 v400 h600"
fill="none" stroke="#000" stroke-width="3" />
<!--Y Lines-->
<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"
fill="none" stroke="#AAA" stroke-width="1" />
</svg>
PAGE 290
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:إضافة خطوط كعالمات للمحور األفقي فيكون الكود كالتالي .3
<svg width="800" height="600" >
<!--X,Y Axises-->
<path d="M100,100 v400 h600"
fill="none" stroke="#000" stroke-width="3" />
<!--Y Lines-->
<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"
fill="none" stroke="#AAA" stroke-width="1" />
<!--X Lines-->
<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"
fill="none" stroke="#000" stroke-width="3"/>
</svg>
PAGE 292
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:إضافة نصوص المحور الرأسي فيكون الكود كالتالي .4
<svg width="800" height="600" >
<!--X,Y Axises-->
<path d="M100,100 v400 h600"
fill="none" stroke="#000" stroke-width="3" />
<!--Y Lines-->
<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"
fill="none" stroke="#AAA" stroke-width="1" />
<!--X Lines-->
<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"
fill="none" stroke="#000" stroke-width="3"/>
<!--Y Texts-->
<text x="20" y="152" fill="#A00">120,000</text>
<text x="20" y="202" fill="#A00">110,000</text>
<text x="20" y="252" fill="#A00">100,000</text>
<text x="22" y="302" fill="#A00">90,000</text>
<text x="22" y="352" fill="#A00">80,000</text>
<text x="22" y="402" fill="#A00">70,000</text>
<text x="22" y="452" fill="#A00">60,000</text>
</svg>
293 صفحة رقم
www.hassouna-academy.com ادخل وسجل حساب على الموقع اآلن
CSS Zero to Hero – From Hassouna Academy
Hassouna Academy Basic Rock - Like - Subscribe - Share – Views +🔔
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
PAGE 294
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
:إضافة نصوص المحور األفقي فيكون الكود كالتالي .5
<svg width="800" height="600" >
<!--X,Y Axises-->
<path d="M100,100 v400 h600"
fill="none" stroke="#000" stroke-width="3" />
<!--Y Lines-->
<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"
fill="none" stroke="#AAA" stroke-width="1" />
<!--X Lines-->
<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"
fill="none" stroke="#000" stroke-width="3"/>
<!--Y Texts-->
<text x="20" y="152" fill="#A00">120,000</text>
<text x="20" y="202" fill="#A00">110,000</text>
<text x="20" y="252" fill="#A00">100,000</text>
<text x="22" y="302" fill="#A00">90,000</text>
<text x="22" y="352" fill="#A00">80,000</text>
<text x="22" y="402" fill="#A00">70,000</text>
<text x="22" y="452" fill="#A00">60,000</text>
</svg>
التنفيذ
PAGE 296
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
: فيكون الكود النهائي كالتالي،إضافة أشرطة البيانات .6
<svg width="800" height="600" >
<!--X,Y Axises-->
<path d="M100,100 v400 h600"
fill="none" stroke="#000" stroke-width="3" />
<!--Y Lines-->
<path d="M80,150 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620
m-620,50 h620"
fill="none" stroke="#AAA" stroke-width="1" />
<!--X Lines-->
<path d="M190,500 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20
m100,-20 v20"
fill="none" stroke="#000" stroke-width="3"/>
<!--Y Texts-->
<text x="20" y="152" fill="#A00">120,000</text>
<text x="20" y="202" fill="#A00">110,000</text>
<text x="20" y="252" fill="#A00">100,000</text>
<text x="22" y="302" fill="#A00">90,000</text>
<text x="22" y="352" fill="#A00">80,000</text>
<text x="22" y="402" fill="#A00">70,000</text>
<text x="22" y="452" fill="#A00">60,000</text>
<!--Data Bars-->
<path d="M170,498 v-148 h35 v148 z"
fill="#0fbf45" stroke="#109538" stroke-width="2" />
</svg>
PAGE 298
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
التنفيذ
الوسم set
يوفر عنصر setوسيلة بسيطة لتعيين قيمة خاصية لفترة محددة فقط.
الوسم view
طريقة العرض viewهي طريقة محددة لعرض الصورة ،مثل مستوى
التكبير أو عرض التفاصيل.
الوسم metadata
يضيف عنصر metadataبيانات التعريف إلى محتوى ،SVG
فالبيانات الوصفية هي معلومات منظمة حول البيانات نفسها ،ويجب أن
تكون محتويات < >metadataعناصر من مساحات أسماء
XMLاألخرى مثل ، FOAF ،RDFإلخ.
PAGE 300
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
الوسم hatch
يتم استخدام عنصر hatchلملء كائن ما أو تحديده باستخدام مسار
واحد أو أكثر من المسارات المحددة مسبقاً ،والتي تتكرر على فترات زمنية
محددة في اتجاه محدد لتغطية المساحات المراد رسمها ،ويستخدم معه
الوسم hatchpathفي العمل.
الوسم foreignObject
يتضمن عنصر foreignObjectعناصر مختلفة من فضاء األسماء
namespaceللـ ،XMLفي سياق مستعرض الويب ،ومن المرجح
أن يكون .(X)HTML
الوسم discard
يتيح عنصر discardللـ authorsتحديد الوقت الذي سيتم فيه
تجاهل عناصر معينة ،وبالتالي تقليل الموارد المطلوبة من قبل ،SVG
ويعد هذا مفيداً في الحفاظ على الذاكرة أثناء عرض المستندات الطويلة.
الوسم solidcolor
أثناء عملك تحب أن تتجه نحو التنظيم ،والوسم solidcolorيساعدك
في ذلك عن طريق أن تجمع مجموعة من األلوان الخاصة بك ،وتجعل id
مميز لكل لون ،ثم تعمل بهم وتنادي عليهم بالـ idلكل لون ،وفي أي
وقت إذا أحببت تغيير اللون سيتغير على الكل ،ولكن مع األسف غير مدعوم
على أغلب المتصفحات حتى اآلن.
الوسم color-profile
هو ،Deprecatedأي تم االستغناء عنه ،وهو يسمح بوصف ملف
مخصص للون المستخدم للصورة.
PAGE 302
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
دورات األكاديمية
أن تنشرها في كل مكان من الروابط، ووصيتي لك،اليك كنوز وهدايا
وأيضاً وصيتي لك بأن تشاهدها وتنصح الجميع بمشاهدتها من،األصلية
. لتنجح هذه الكورسات بفضل اهلل،اليوتيوب من أكاديمية حسونة
برنامج المبرمجتية
https://www.youtube.com/playlist?list=PLHIfW1KZRIfnLcjFtaI9O5vt1DKdSVM4K
PAGE 304
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 306
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 308
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 310
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
PAGE 312
Create Account Now www.hassouna-academy.com
بفضل للا من البداية إلى االحتراف – من اكاديمية حسونةCSS لغة
🔔 ليصلك كل جديد+ ادخل واشترك وشاهد وشارك- صخرة األساس أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
تسالي مبرمجين
https://www.youtube.com/playlist?list=PLHIfW1KZRIfl_zc__duOyEhaCCPZRAuHv
اكاديمية حسونة
https://www.youtube.com/playlist?list=PLHIfW1KZRIfmxKFdzlyAna7sYE_L2hI0o
شكر خاص
الشكر أوالً وأخيراً وابتداء وانتهاء هلل عز وجل ،ثم نشكر كل من:
شكر ألبي وأمي اللذان ربياني صغيرا. •
شكر لكل أصدقائي واصحابي واحبابي في كل مكان. •
شكر لكل من عرف قدر العلم. •
شكر لكل طالب او طالبة او اخ او صاحب او صديق او حبيب ينشر هذا العمل •
في كل مكان ليفيد الجميع بإذن اهلل.
شكر لألستاذ احمد باريان على دعمه في نشر العلم في كل مكان. •
شكر للمهندس أحمد إبراهيم سالم ()Ahmed Ibrahim •
شكر للدكتور عادل عبد الصبور (.)Adel Sabour •
شكر للمهندس محمود سمير فايد (.)Mahmoud Fayed •
شكر للمهندس أسامة محمد (.)Osama Elzero •
شكر للقائمين على موقع developer.mozilla.org •
شكر للقائمين على موقع wikipedia.org •
شكر للقائمين على موقع w3.org •
PAGE 314
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy
على قراءتك هذا الكتاب ،ونتمنى لك أوالً :نتقدم لك بخالص الشكر
االستفادة الكاملة من محتواه.
في أكاديمية حسونة لتنضم ثانياً :ال تنسى أن تسجل لنفسك حساب
إلينا وتشارك معنا كل محتويات الموقع ،سجل من الرابط التالي:
https://www.hassouna-academy.com/register
References المراجع
الجدول التالي يحتوي على المراجع التي تم الرجوع إليها أثناء تأليف هذا
. أو معلوماتية، سواء كانت مراجع تعليمية مرئية أو مقروءة،الكتاب
الرابط م المرجع
https://www.hassouna-academy.com/
اكاديمية حسونة1
https://www.wikipedia.org/ ويكيبيديا2
https://www.w3.org منظمة الويب العالمية3
https://developer.mozilla.org mozilla 4
PAGE 316
Create Account Now www.hassouna-academy.com
بفضل للا لغة CSSمن البداية إلى االحتراف – من اكاديمية حسونة
صخرة األساس -ادخل واشترك وشاهد وشارك 🔔+ليصلك كل جديد أكاديمية حسونة
www.hassouna-academy.com www.youtube.com/user/HassounaAcademy