من قبل ، ركزنا على تلخيص مختلف الأشكال والنصوص والصور. بعد ذلك ، سوف نلخص معالجة الألوان ، أي التأثيرات الحدودية والحدود ، كما نناقش قماش. ستجد أن المحتوى هنا هو نفس القماش. يمكن كتابة هذه الخصائص في عناصر كسمات أو مخزنة في CSS (هذا يختلف عن القماش).
ملء اللون - سمة ملء تستخدم هذه الخاصية اللون المحدد لملء الجزء الداخلي من الشكل. إنه بسيط للغاية للاستخدام. ما عليك سوى تعيين قيمة اللون لهذه الخاصية مباشرة. انظر مثال:<rect x = "10" y = "10" stroke = "Blue" fill = "Red"
تعبئة opacity = "0.5" opacity-opacity = "0.8"/>
في المثال أعلاه ، يتم رسم مستطيل أحمر وأزرق. بضع نقاط يجب ملاحظة:
1. إذا لم يتم توفير سمة التعبئة ، فسيتم استخدام التعبئة السوداء افتراضيًا. إذا كنت ترغب في إلغاء التعبئة ، فأنت بحاجة إلى ضبطه على لا شيء.
2. يمكنك ضبط شفافية التعبئة ، أي ، حاجة التعبئة ، ونطاق القيمة هو من 0 إلى 1.
3. واحد أكثر تعقيدًا قليلاً هو سمة الحكم . تحدد هذه الخاصية خوارزمية تحدد ما إذا كانت النقطة تنتمي إلى نطاق التعبئة ؛ بالإضافة إلى الوراثة ، هناك قيمتان:
NonZero : تتمثل الخوارزمية المستخدمة لهذه القيمة في انبعاث الخطوط من النقطة التي يجب الحكم عليها في أي اتجاه ، ثم حساب اتجاه نقطة التقاطع بين الشكل والخط ؛ تبدأ نتيجة الحساب من 0 ، وكل مقطع خط عند التقاطع هو من اليسار إلى اليمين ، إضافة 1 ؛ كل مقطع خط عند التقاطع هو من اليمين إلى اليسار ، وطرح 1 ؛ بعد حساب جميع نقاط التقاطع بهذه الطريقة ، إذا كانت نتيجة هذا الحساب لا تساوي 0 ، فإن النقطة في الشكل وتحتاج إلى ملء ؛ إذا كانت القيمة تساوي 0 ، فلا تحتاج إلى ملء خارج الشكل. راجع المثال التالي: EVENDD : الخوارزمية المستخدمة لهذه القيمة هي أن تنبعث من الخطوط من النقطة التي يجب الحكم عليها في أي اتجاه ، ثم حساب عدد النقاط التي يتقاطع فيها الرقم وقطاع الخط. إذا كان الرقم غريبًا ، يتم تغيير النقطة إلى الشكل ويجب ملؤها ؛ إذا كان الرقم متساويًا ، فإن النقطة خارج الشكل ولا تحتاج إلى ملء. انظر المثال في الشكل أدناه: سمة السكتة الدماغية الحدودية المثال أعلاه قد استخدم سمة السكتة الدماغية. تستخدم هذه السمة القيمة المحددة لرسم حدود الشكل ، والتي هي أيضًا مباشرة للغاية للاستخدام. فقط تعيين قيمة اللون لها. يلاحظ:1. إذا لم يتم توفير سمة السكتة الدماغية ، فإن حدود الرسم البياني لا يتم رسمها افتراضيًا.
2. يمكنك ضبط شفافية الحافة ، وهي سعة السكتة الدماغية ، ونطاق القيمة هو من 0 إلى 1.
في الواقع ، فإن وضع الحواف أكثر تعقيدًا قليلاً من داخل الرسم البياني ، لأنه بالإضافة إلى اللون ، تحتوي الحواف أيضًا على أشكال تحتاج إلى تحديدها.
نقطة نهاية الخط - خاصية السكتة الدماغية
تحدد هذه الخاصية نمط نقطة النهاية لقطاع الخط. يمكن أن تستخدم هذه الخاصية ثلاث قيم بعقب ومربع وجولة . انظر مثال:<svg>
<line x1 = "40" x2 = "120" y1 = "20" y2 = "20" stroke = "black" width = "20" stroke-linecap = "butt"/>
<line x1 = "40" x2 = "120" y1 = "60" y2 = "60" stroke = "black" width = "20" stroke-linecap = "square"/>
<line x1 = "40" x2 = "120" y1 = "100" y2 = "100" stroke = "black" width = "20" stroke-linecap = "round"/>
</svg>
يرسم هذا الرمز 3 أسطر باستخدام أنماط مختلفة من نقاط النهاية.
من الصورة على اليسار ، يمكننا بسهولة رؤية الفرق في الأنماط في 3.
اتصال الخط - سمة السكتة الدماغية تحدد هذه الخاصية النمط في اتصال شرائح الخط. يمكن أن تستخدم هذه الخاصية القيم الثلاث للميتري ، المستديرة ، والمشطبة . انظر مثال:<svg>
<Polyline Points = "40 60 80 20 120 60" Stroke = "Black" Width = "20"
stroke-linecap = "butt" fill = "شفاف" stroke-linejoin = "miter"/>
<نقاط polyline = "40 140 80 100 120 140" Stroke = "Black" Width = "20"
stroke-linecap = "round" fill = "شفاف" السكتة الدماغية linejoin = "round"/>
<نقاط polyline = "40 220 80 180 120 220" Stroke = "Black" Width = "20"
stroke-linecap = "square" fill = "شفاف" stroke-linejoin = "bevel"/>
</svg>
من الصورة الموجودة على اليسار ، يمكننا بسهولة رؤية الفرق في الأناقة في 3.
السمة الافتراضية والحقيقية - السكتة الدماغية السكتة الدماغية
يمكن لهذه الخاصية تعيين الخطوط الافتراضية والحقيقية لقطاع الخط. انظر مثال:<svg>
<path d = "M 10 75 Q 50 10 100 75 T 190 75" Stroke = "Black"
stroke-linecap = "round" stroke-dasharray = "5،10،5" fill = "none"/>
<path d = "M 10 75 L 190 75" Stroke = "Red"
stroke-linecap = "Round" Width = "1" Stroke-dasharray = "5،5" fill = "none"/>
</svg>
تحدد هذه الخاصية بعض الأعمدة من الأرقام ، ولكن يجب فصل هذه الأرقام.
بالطبع ، يمكن تضمين المساحات في السمة ، ولكن لا يتم استخدام المساحات كحمد. كل رقم
يتم تعريف طول قطاع الخط الصلب ، ويتم تدويره بترتيب الرسم وليس الرسم.
لذا فإن الخط المرسوم في المثال على اليسار هو خط صلب يحتوي على 5 وحدات ، تاركًا مسافات مع 5 وحدات.
ارسم 5 وحدات من الخطوط الصلبة ... واستمر هكذا.
بالإضافة إلى هذه الخصائص الشائعة الاستخدام ، يمكن تعيين الخصائص التالية:
السكتة الدماغية miterlimit : هذا هو نفسه كما في القماش ، الذي يتولى تأثير ميتري عند العلاقة بين متى وما إذا كان الخط مرسم. Stroke-Dashoffset : تحدد هذه الخاصية الموضع الذي يبدأ فيه الخط المنقط. استخدم CSS لعرض البيانات يعزز HTML5 فكرة Div+CSS ، وبالتالي يمكن أيضًا تسليم الجزء الذي يعرض البيانات إلى CSS للمعالجة. بالمقارنة مع عناصر HTML العادية ، فإنه مجرد لون الخلفية والحدود التي تحل محلها التعبئة والسكتة الدماغية. معظم الآخرين متشابهين. لنأخذ مثالًا موجزًا:#Myrect: Hover {
السكتة الدماغية: أسود.
ملء: الأزرق.
}
أليست مألوفة جدا؟ الأمر بهذه البساطة.
المرجع العملي:فهرس البرنامج النصي: 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/