<svg>
<rect x = "10" y = "10" stroke = "black" fill = "شفاف" width = "5"/>
<rect x = "60" y = "10" rx = "10" ry = "10" stroke = "black" fill = "شفاف" width = "5"/>
<circle cx = "25" cy = "75" r = "20" stroke = "red" fill = "شفاف" width = "5"/>
<lelipse cx = "75" cy = "75" rx = "20" ry = "5" stroke = "red" fill = "شفاف" السكتة الدماغية = "5"/>
<line x1 = "10" x2 = "50" y1 = "110" y2 = "150" stroke = "Orange" fill = "شفاف" السكتة الدماغية = "5"/>
<نقاط polyline = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
السكتة الدماغية = "Orange" fill = "شفاف" السكتة الدماغية = "5"/>
<نقاط polygon = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
السكتة الدماغية = "الأخضر" fill = "شفاف" width = "5"/>
<path d = "M20،230 Q40،205 50،230 T90،230" fill = "none" stroke = "blue" width = "5"/>
</svg>
النتائج المعروضة في هذا HTML هي كما يلي:
هذا المثال يرسم العديد من الأشكال: المستطيلات الطبيعية ، المستطيلات المستديرة ، الدوائر ، القطعات ، الخطوط المستقيمة ، المضلعات ، والمسارات. هذه كلها عناصر رسومية أساسية. على الرغم من أن هناك العديد من الطرق لرسم رسم بياني ، مثل Rect يمكن تنفيذها باستخدام Rect أو Path ، لا يزال يتعين علينا محاولة الحفاظ على محتوى SVG قصيرًا وموجزًا وسهل القراءة .
فيما يلي تعليمات استخدام كل شكل (لا يوجد سوى الخصائص الأساسية التي تتحكم في شكل وموضع الشكل ، ويتم تلخيص خصائص مثل التعبئة لاحقًا).
المستطيل - عنصر المستقيم يحتوي هذا العنصر على 6 خصائص تتحكم في المواقف والأشكال ، وهي:x: قيمة x للإحداثيات (نظام إحداثيات المستخدم) للركن الأيسر العلوي من المستطيل.
Y: قيمة Y للإحداثيات (نظام إحداثيات المستخدم) في الزاوية اليسرى العليا من المستطيل.
العرض: عرض المستطيل.
الارتفاع: ارتفاع المستطيل.
RX: عندما يتم تحقيق تأثير الزاوية المستديرة ، فإن نصف قطر الزاوية المستديرة على طول المحور السيني.
RY: عند تحقيق تأثير الزاوية المستديرة ، دائرة نصف قطر الزاوية المستديرة على طول المحور ص.
على سبيل المثال ، في المثال أعلاه ، يتم تحقيق تأثير الزاوية المستديرة ، ويمكنك أيضًا تحقيق تأثير ركن القطع الناقص عن طريق تعيين RX و RY على قيم مختلفة.
دائرة - عنصر الدائرة خصائص هذا العنصر بسيطة ، بشكل أساسي لتحديد المركز والنصف القطر:ص: نصف قطر الدائرة.
CX: X-value من الإحداثيات المركزية.
CY: قيمة Y للإحداثيات المركزية للدائرة.
القطع الناقص - عنصر القطع الناقص هذا عنصر دائري أكثر عمومية. يمكنك التحكم في أطوال المحور شبه المجرم والمحور شبه المجر على التوالي لتحقيق القطع القاسية المختلفة. من السهل التفكير في أنه عندما يكون اثنين من المحاور متساوية ، فهي دائرة مثالية.RX: محور نصف الماجور (X نصف قطر).
RY: محور شبه الشتاب (Y-Radius).
CX: X-value من الإحداثيات المركزية.
CY: قيمة Y للإحداثيات المركزية للدائرة.
خط العنصر الخط يحتاج الخط المستقيم إلى تحديد نقطة البداية ونقطة النهاية:X1: نقطة البداية X الإحداثيات.
Y1: إحداثيات نقطة البداية.
x2: End Point X Costainate.
Y2: تنسيق نقطة النهاية.
polyline - عنصر polyline تحتاج بولينز بشكل أساسي إلى تحديد نقاط النهاية لكل مقطع خط ، وبالتالي فإن مجموعة نقطة واحدة فقط مطلوبة كمعلمات:النقاط: سلسلة من النقاط مفصولة بالمساحات ، الفواصل ، الخطوط الجديدة ، إلخ. يجب أن تحتوي كل نقطة على رقمين: القيمة x وقيمة y. لذلك يمكن كتابة النقاط الثلاث التالية (0،0) ، (1،1) و (2،2) على النحو التالي: 0 0 ، 1 1 ، 2 2.
المضلع - عنصر المضلع هذا العنصر هو القيام بخطوة واحدة أكثر من عنصر polyline ، وتوصيل النقطة الأخيرة والنقطة الأولى لتشكيل رقم مغلق. المعلمات هي نفسها.النقاط: سلسلة من النقاط مفصولة بالمساحات ، الفواصل ، الخطوط الجديدة ، إلخ. يجب أن تحتوي كل نقطة على رقمين: القيمة x وقيمة y. لذلك يمكن كتابة النقاط الثلاث التالية (0،0) ، (1،1) و (2،2) على النحو التالي: 0 0 ، 1 1 ، 2 2.
مسار - عنصر المسار هذا هو العنصر الأكثر عمومية وقوة. باستخدام هذا العنصر ، يمكنك تنفيذ أي شخصية أخرى ، ليس فقط الأشكال الأساسية أعلاه ، ولكن أيضًا الأشكال المعقدة مثل منحنى Bezier ؛ بالإضافة إلى ذلك ، يمكن أن يؤدي استخدام المسار إلى تحقيق شرائح انتقال سلسة. على الرغم من أنه يمكن أيضًا استخدام Polyline لتحقيق هذا التأثير ، إلا أن هناك العديد من النقاط التي يجب توفيرها ، والتأثير ليس جيدًا إذا تم تضخيمه. يتحكم هذا العنصر في الموضع والشكل مع معلمة واحدة فقط:D: سلسلة من تعليمات الرسم ومعلمات الرسم (النقاط).
تنقسم تعليمات الرسم إلى نوعين: تعليمات الإحداثيات المطلقة وتعليمات الإحداثيات النسبية. الحروف المستخدمة في هاتين التعليمات هي نفسها ، أي أن الحالة العلوية والسفلية مختلفة. تستخدم التعليمات المطلقة الحروف الكبيرة ، والإحداثيات هي أيضًا إحداثيات مطلقة ؛ تستخدم التعليمات النسبية الحروف الصغيرة المقابلة ، وتمثل إحداثيات النقاط الإزاحة.
تعليمات الرسم الإحداثي المطلق تمثل معلمات هذه المجموعة من التعليمات الإحداثيات المطلقة. على افتراض أن الفرشاة الحالية موجودة على (x0 ، y0) ، فإن تعليمات الإحداثيات المطلقة التالية تمثل المعنى على النحو التالي:| تعليمات | المعلمة | يوضح |
| م | xy | انقل الفرشاة إلى النقطة (x ، y) |
| ل | xy | تسحب الفرشاة شريحة الخط من النقطة الحالية إلى النقطة (x ، y) |
| ح | x | ترسم الفرشاة فئة الخط الأفقي من النقطة الحالية إلى النقطة (x ، y0) |
| الخامس | ذ | ترسم الفرشاة مقطع الخط العمودي من النقطة الحالية إلى النقطة (x0 ، y) |
| أ | RX RY X-AXIS-ROTATION كبير المسحات | ترسم الفرشاة قوسًا من النقطة الحالية إلى النقطة (x ، y) |
| ج | x1 y1 ، x2 y2 ، xy | ترسم الفرشاة منحنى بيزيير مكعب من النقطة الحالية إلى النقطة (x ، y) |
| ق | x2 y2 ، xy | نسخة خاصة من منحنى Bezier المكعب (تم حذف نقطة التحكم الأولى) |
| س | X1 Y1 ، XY | ارسم منحنى Bezier التربيعي إلى النقطة (x ، y) |
| ر | xy | نسخة خاصة من منحنى بيزير التربيعي (تم حذف نقاط التحكم) |
| ض | لا توجد معلمات | ارسم رقمًا مغلقًا ، وإذا لم تحدد سمة D الأمر Z ، فقم ارسم قطاع الخط بدلاً من الشكل المرفق. |
انقل أمر الفرشاة M ، ارسم الأمر Line: L ، H ، V ، وأغلق الأمر Z كلها بسيطة نسبيًا ؛ ما يلي هو التركيز على التعليمات القليلة لرسم المنحنى. تعليمات رسم القوس: RX RY X-AXIS-ROTATION كبير المستحضرات XY
من الأكثر تعقيدًا لتوصيل نقطتين مع قوس ، وهناك العديد من المواقف ، لذلك يحتوي هذا الأمر على 7 معلمات ، تتحكم في كل سمة من سمة المنحنى. ما يلي يفسر معنى القيمة العددية:
RX ، RY هو طول المحور شبه الماجور ومحور شبه القوس من القوس
الدوران المحور X هو الزاوية بين المحور السيني والاتجاه الأفقي حيث يوجد هذا القوس ، أي زاوية الدوران عكس اتجاه عقارب الساعة للمحور X ، ويمثل الرقم السالب زاوية الدوران في اتجاه عقارب الساعة.
تعتبر القوس الكبيرة 1 لتمثيل قوس زاوية كبير و 0 لتمثيل قوس زاوية صغيرة.
Sweep-Flag هو 1 ، والذي يمثل القوس من نقطة البداية إلى نقطة النهاية في اتجاه عقارب الساعة حول الوسط ، ويمثل 0 الاتجاه عكس اتجاه عقارب الساعة.
x ، y هي إحداثيات محطة القوس.
لن أتحدث عن المعلمتين الأوليين والمعلمتين الأخيرتين ، الأمر بسيط للغاية ؛ دعنا نتحدث عن المعلمات الثلاثة في الوسط:
يمثل الدوران المحور X زاوية الدوران ، ويختبر الاختلافات في الأقواس في المثال التالي:
<svg>
<path d = "M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10 "Stroke =" Black "Fill =" Green "Width =" 2 "fill-opacity =" 0.5 "/>
</svg>
يرسم HTML أعلاه الشكل التالي:
من الشكل ، يمكننا أن نرى أن معلمات دوران القطع الناقص المختلفة تؤدي إلى اتجاهات مختلفة للقوس المرسوم. بالطبع ، هذه المعلمة ليس لها أي تأثير على الدائرة المثالية.
تتحكم في حجم القوس الكبير في القوس واتجاهه ، وتجربة الاختلافات في القوس في المثال التالي:
<svg>
<path d = "M80 80
45 45 ، 0 ، 0 ، 0 ، 125 125
L 125 80 Z "Fill =" Green "/>
<path d = "M230 80
A 45 45 ، 0 ، 1 ، 0 ، 275 125
L 275 80 Z "Fill =" Red "/>
<path d = "M80 230
45 45 ، 0 ، 0 ، 1 ، 125 275
L 125 230 Z "Fill =" Purple "/>
<path d = "M230 230
45 45 ، 0 ، 1 ، 1 ، 275 275
L 275 230 Z "Fill =" Blue "/>
</svg>
يرسم هذا HTML الصور التالية:
من ما سبق ، يمكننا أن نرى أن هذه المعلمات هي في الواقع المعلمات الوحيدة المطلوبة لتحديد قسم من القوس. وينظر هنا أيضًا إلى أن الأقواس في SVG أكثر تعقيدًا من تلك الموجودة في القماش.
رسم تعليمات منحنى Bezier المكعب: C x1 Y1 ، x2 y2 ، xyهناك نقطتان تحكمان في منحنى Bezier المكعب ، وهما (x1 ، y1) و (x2 ، y2) ، والآخر (x ، y) يمثل نقطة نهاية المنحنى. تجربة الأمثلة التالية:
<svg>
<path d = "M10 10 C 20 20 ، 40 20 ، 50 10" Stroke = "Black" Fill = "Transparent"/>
<path d = "M70 10 C 70 20 ، 120 20 ، 120 10" Stroke = "Black" Fill = "Transparent"/>
<path d = "M130 10 C 120 20 ، 180 20 ، 170 10" Stroke = "Black" Fill = "Transparent"/>
<path d = "M10 60 C 20 80 ، 40 80 ، 50 60" Stroke = "Black" Fill = "Transparent"/>
<path d = "M70 60 C 70 80 ، 110 80 ، 110 60" Stroke = "Black" Fill = "Transparent"/>
<path d = "M130 60 C 120 80 ، 180 80 ، 170 60" Stroke = "Black" Fill = "Transparent"/>
<path d = "M10 110 C 20 140 ، 40 140 ، 50 110" Stroke = "Black" Fill = "Transparent"/>
<path d = "M70 110 C 70 140 ، 110 140 ، 110 110" Stroke = "Black" Fill = "Transparent"/>
<path d = "M130 110 C 120 140 ، 180 140 ، 170 110" Stroke = "Black" Fill = "Transparent"/>
</svg>
هذا المقتطف HTML يرسم الشكل التالي:
مما سبق يمكننا أن نرى أن نقطة التحكم تتحكم في راديان المنحنى.
نسخة خاصة من منحنى Bezier Cubic: SX2 Y2 ، XYفي كثير من الأحيان ، من أجل رسم منحنى سلس ، من الضروري رسم المنحنى بشكل مستمر عدة مرات. في هذا الوقت ، من أجل تنعيم الانتقال ، تكون نقطة التحكم في المنحنى الثاني في كثير من الأحيان نقطة تعيين نقطة التحكم في المنحنى الأول على الجانب الآخر من المنحنى. يمكن استخدام هذه النسخة المبسطة في هذا الوقت. تجدر الإشارة هنا إلى أنه إذا لم تكن هناك تعليمات أخرى S أو تعليمات C أمام تعليمات S ، فسيتم اعتبار نقطتي التحكم متماثلين في منحنى Bezier التربيعي ؛ إذا تم استخدام تعليمات S بعد تعليمات S أو تعليمات C أخرى ، فسيتم تعيين نقطة التحكم الأولى في تعليمات S اللاحقة افتراضيًا إلى نقطة تعيين لنقطة التحكم الثانية في المنحنى السابق. لنجربه:
<svg>
<path d = "M10 80 C 40 10 ، 65 10 ، 95 80 S 150 150 ، 180 80" Stroke = "Black" Fill = "Transparent"/>
</svg>
يتم رسم جزء HTML هذا على النحو التالي:
لا تحتوي تعليمات S أعلاه على نقطة تحكم ثانية فقط ، وتستخدم نقطة التحكم الأولى نقطة تعيين لنقطة التحكم الثانية في تعليمات المنحنى السابقة.
رسم تعليمات منحنى Bezier التربيعية: QX1 Y1 ، XY ، T XY (إصدار خاص من منحنى Bezier التربيعي) يحتوي منحنى Bezier التربيعي على نقطة تحكم واحدة فقط (X1 ، Y1) ، والتي تظهر عادة في الشكل أدناه:إذا كنت ترسم منحنىًا بشكل مستمر ، فيمكنك أيضًا استخدام الإصدار المبسط T. وبالمثل ، عندما تكون T فقط قبل أوامر Q أو T ، سيتم تعيين نقطة التحكم في الأمر T اللاحق على نقطة تعيين نقطة التحكم في المنحنى السابق بشكل افتراضي. لنجربه:
<svg>
<path d = "M10 80 Q 52.5 10 ، 95 80 T 180 80" Stroke = "Black" Fill = "Transparent"/>
</svg>
يتم رسم جزء HTML هذا على النحو التالي:
وبالمثل ، إذا لم يسبق الأمر T أمر Q أو T ، يُعتبر أنه لا توجد نقطة تحكم وأن الخط المرسوم هو خط مستقيم.
تعليمات رسم الإحداثيات النسبية خطابات تعليمات رسم الإحداثيات المطلقة هي نفسها ، باستثناء أنها جميعها صغيرة. تمثل المعلمات المشاركة في الإحداثيات في معلمات هذه المجموعة من التعليمات الإحداثيات النسبية ، مما يعني أن المعلمات تمثل الإزاحة من النقطة الحالية إلى النقطة المستهدفة ، ويمثل الرقم الموجب الإزاحة الإيجابية للمحور ، ويمثل الرقم السالب الإزاحة العكسية. ومع ذلك ، للحصول على تعليمات Z ، لا يوجد فرق في حالة.تجدر الإشارة هنا إلى أنه يمكن استخدام تعليمات الإحداثيات المطلقة وتعليمات الإحداثيات النسبية بطريقة مختلطة . في بعض الأحيان يمكن أن يؤدي الاستخدام المختلط إلى طرق رسم أكثر مرونة.
ملاحظات على رسم مسار SVG: عند رسم شخصية بالثقوب ، يجب أن تنتبه إلى: يجب أن يكون رسم الحواف الخارجية عكس اتجاه عقارب الساعة ، ويجب أن يكون ترتيب حواف الثقوب في اتجاه عقارب الساعة. فقط تأثير التعبئة الرسومية المرسومة بهذه الطريقة سيكون صحيحًا. المرجع العملي:فهرس البرنامج النصي: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
مركز التطوير: https://developer.mozilla.org/en/svg
المرجع الشعبي: http://www.chinasvg.com/
المستند الرسمي: http://www.w3.org/tr/svg11/