SVG و Canvas متماثلان ، وكلاهما يستخدم طرق تمثيل ألوان HTML/CSS القياسية ، ويمكن استخدام هذه الألوان لسمات التعبئة والسكتة الدماغية.
هناك في الأساس الطرق التالية لتحديد الألوان :1. اسم اللون: استخدم اسم اللون الأحمر والأزرق والأسود ...
2. قيمة RGBA/RGB: من السهل أيضًا فهمها ، على سبيل المثال #FF0000 ، RGBA (255،100،100،0.5).
3. القيمة السداسية: لون محدد في سداسي عشري ، مثل #ffffff.
4. قيمة التدرج: هذا هو نفسه كما في قماش ، ودعم لونين متدرجين: التدرج الخطي وتدرج الحلقة. كما هو مبين في الشكل أدناه:
5. ملء النمط: استخدم نمطًا مخصصًا مثل لون التعبئة.
القليلة الأولى بسيطة للغاية ، دعنا نركز على ألوان ملء في الاثنين التاليين.
التدرج الخطي يمكن استخدام التدرج الخطي لتحديد التدرجات الخطية ، ويتم تعريف كل مكون لون التدرج باستخدام عنصر الإيقاف. انظر المثال التالي:<svg>
<defs>
<lineargradient id = "gradient1">
<إيقاف الإزاحة = "0 ٪"/>
<توقف الإزاحة = "50 ٪"/>
<توقف الإزاحة = "100 ٪"/>
</lineargradient>
<lineargradient id = "gradient2" x1 = "0" x2 = "0" y1 = "0" y2 = "1"
<stop offset = "0 ٪" stop-color = "red"/>
<stop offset = "50 ٪" stop-color = "black" stop-opacity = "0"/>
<stop offset = "100 ٪" stop-color = "Blue"/>
</lineargradient>
<style type = "text/css"> <! [CDATA [
#rect1 {fill: url (#gradient1) ؛ }
.stop1 {stop-color: red ؛ }
.stop2 {stop-color: Black ؛ توقف التوقف: 0 ؛ }
.stop3 {stop-color: Blue ؛ }
]]>
</style>
</defs>
<rect id = "rect1" x = "10" y = "10" rx = "15" ry = "15"/>
<rect x = "10" y = "120" rx = "15" ry = "15" fill = "url (#bradient2)"/>
</svg>
في هذا المثال ، نحتاج إلى ملاحظة :1. يجب وضع عناصر الألوان التدرج في عنصر DEFS ؛
2. تحتاج إلى تعيين قيمة المعرف لعنصر التدرج ، وإلا فلن تتمكن العناصر الأخرى من استخدام هذا التدرج.
3. يتم تعريف أعضاء الألوان المتدرجة باستخدام STOP ، ويمكن أيضًا تحديد خصائصهم باستخدام CSS ؛ وهو يدعم سمات مثل الفئة والمعرف ، والتي تدعمها HTML القياسية. السمات الشائعة الأخرى هي كما يلي :
سمة الإزاحة : هذا يحدد نطاق عمل لون العضو ، وقيمة هذه السمة تتراوح من 0 ٪ إلى 100 ٪ (أو 0 إلى 1) ؛ عادةً ما يتم ضبط اللون الأول على 0 ٪ ، ويتم تعيين آخر إلى 100 ٪. سمة التوقف الملونة : هذا بسيط للغاية ، ويحدد لون لون العضو. خاصية إيقاف الطاقة : تحدد شفافية ألوان الأعضاء. x1 ، y1 ، x2 ، y2 سمات: هاتان النقطتان تحدد اتجاه التدرج. إذا لم تكتبها بشكل افتراضي ، فهو تدرج أفقي. في المثال أعلاه ، يتم إنشاء التدرج العمودي أيضًا.4. استخدم ألوان التدرج ، كما هو موضح في المثال ، فقط تعيين القيمة لملء أو السكتة الدماغية في شكل عنوان URL (#ID).
5. إعادة استخدام أعضاء التدرج: يمكنك أيضًا استخدام XLink: HREF للإشارة إلى أعضاء التدرج المحدد ، لذلك يمكن أيضًا إعادة كتابة المثال أعلاه على النحو التالي:
<lineargradient id = "gradient1">
<إيقاف الإزاحة = "0 ٪"/>
<توقف الإزاحة = "50 ٪"/>
<توقف الإزاحة = "100 ٪"/>
</lineargradient>
<lineargradient id = "gradient2" x1 = "0" x2 = "0" y1 = "0" y2 = "1" xlink: href = "#gradient1"/>
تدرج الحلقة استخدم عنصر RadialGradient لتحديد تدرج الحلقة ، أو استخدام توقف لتحديد لون العضو. انظر مثال:<svg>
<defs>
<radialgradient id = "gradient3">
<stop offset = "0 ٪" stop-color = "red"/>
<stop offset = "100 ٪" stop-color = "Blue"/>
</radialgradient>
<radialgradient id = "gradient4" cx = "0.25" cy = "0.25" r = "0.25">
<stop offset = "0 ٪" stop-color = "red"/>
<stop offset = "100 ٪" stop-color = "Blue"/>
</radialgradient>
</defs>
<rect x = "10" y = "10" rx = "15" ry = "15" fill = "url (#bradient3)"/>
<rect x = "10" y = "120" rx = "15" ry = "15" fill = "url (#bradient4)"/>
</svg>
من المثال أعلاه ، باستثناء اسم العنصر وبعض الأعضاء المميزين ، يجب وضع كل شيء آخر مثل التدرج الخطي ، بما في ذلك تعريف التوقف ، في DEFS ، ويجب تعيينه على معرف ، واستخدام عنوان URL (#ID) لتعيين القيم ، إلخ.
سمة الإزاحة : هذا هو نفس قيمة التدرج الخطية ، ولكن المعنى مختلف. في التدرج الحلقي ، يمثل 0 ٪ مركز الدائرة ، وهو أمر سهل الفهم. CX ، CY ، R سمات: في الواقع ، من السهل الفهم. الحلقة تدريجية. بالطبع ، تحتاج إلى تحديد المركز ونصف قطر الحلقة. يمكنك فهم حجم وموضع الدائرة في المثال أعلاه. FX ، سمة السنة المالية : تحدد الموضع في مركز اللون (التركيز) ، أي الإحداثيات في أفضل مكان للون المتدرج. في المثال أعلاه ، فإن أقل حمراء هو مركز الدائرة ، وهو التأثير الافتراضي ؛ إذا كنت تريد تغييره ، فيمكنك تعيين قيم إحداثيات FX ، FY.ومع ذلك ، تحتاج إلى الانتباه إلى قيم CX ، CY ، R ، FX ، FY أعلاه. ستجد أنهم جميعًا عشريون ، فما هي الوحدات؟
هذا يتطلب منك أولاً فهم سمة أخرى ذات صلة: GradientUnits ، والتي تحدد وحدات الإحداثيات المستخدمة لتحديد ألوان التدرج. تحتوي هذه الخاصية على قيمتان متاحتان: UsperSpaceonuse و ObjectBoundingBox.
ObjectBoundingBox هي القيمة الافتراضية. تعد الإحداثيات التي تستخدمها نسبة إلى مربع المرفق الكائن (الحالة التي لا تكون فيها مربع مربع مربع أكثر تعقيدًا ، وتخطيه) ، ومدى القيمة هو من 0 إلى 1. على سبيل المثال ، قيمة الإحداثيات CX و CY في المثال أعلاه (0.25 ، 0.25). وهذا يعني أن مركز الدائرة هو 1/4 من الزاوية اليسرى العلوية من صندوق العلبة ، ونصف قطر 0.25 يعني أن نصف القطر هو 1/4 من طول مربع العلبة المربعة الكائن ، كما ترون في الشكل. userpaceonuse يعني أن الإحداثيات المطلقة تستخدم. عند استخدام هذا الإعداد ، يجب عليك التأكد من إبقاء كائنات التدرج والملء في نفس الموضع.انظر إلى المثال التالي ، لاحظ أن القيمة الافتراضية لعلامة GradientUnits هي ObjectBoundingBox:
<svg>
<defs>
<radialgradient id = "Gradient5"
cx = "0.5" cy = "0.5" r = "0.5" fx = "0.25" fy = "0.25">
<stop offset = "0 ٪" stop-color = "red"/>
<stop offset = "100 ٪" stop-color = "Blue"/>
</radialgradient>
</defs>
<rect x = "10" y = "10" rx = "15" ry = "15"
fill = "url (#gradient5)" Stroke = "Black" Width = "2"/>
<circle cx = "60" cy = "60" r = "50" fill = "شفاف" stroke = "white" السكتة الدماغية = "2"/>
<circle cx = "35" cy = "35" r = "2" fill = "white" stroke = "white"/>
<circle cx = "60" cy = "60" r = "2" fill = "white" stroke = "white"/>
<text x = "38" y = "40" fill = "white" font-family = "sans-serif" font-size = "10pt"> (fx ، fy) </text>
<text x = "63" y = "63" fill = "white" font-family = "sans-serif" font-size = "10pt"> (cx ، cy) </text>
</svg>
ستعرف معنى التركيز من خلال النظر في الاداءات.
بالإضافة إلى ذلك ، هناك عناصر ألوان متدرجة وبعض خصائص التحويل ، مثل GradientTransform ، وهو ليس هو التركيز هنا ، وسيتم تلخيص التحول لاحقًا.
هناك سمة أخرى محتملة يتم استخدامها وهي خاصية PrevictMethod ، والتي تحدد السلوك الذي يجب أن يأخذه لون التدرج عندما يصل إلى نقطة النهاية. تحتوي هذه الخاصية على 3 قيم اختيارية: PAD (افتراضي) ، تعكس ، كرر. وغني عن القول ، Pad هو انتقال طبيعي. بعد انتهاء لون التدرج ، استخدم لون العضو الأخير لتقديم الجزء المتبقي مباشرة من الكائن. سيجعل RECTECT لون التدرج مستمرًا ، لكن لون التدرج سيستمر في العكس ، بدءًا من اللون الأخير إلى اللون الأول ؛ عندما يتم الوصول إلى نقطة نهاية لون التدرج مرة أخرى ، عكس الترتيب ، بحيث يتم ملء الكائن بهذه الطريقة. سيسمح التكرار أيضًا بالاستمرار في تقديم لون التدرج ، ولكن لن يتم عكسه ، وسيظل يتم تقديمه من اللون الأول إلى اللون الأخير مرارًا وتكرارًا. العروض كما يلي:
انظر إلى قطعة من الكود الذي يجعلها مرارًا وتكرارًا:
<svg>
<defs>
<radialgradient id = "التدرج"
cx = "0.5" cy = "0.5" r = "0.25" fx = ". 25" fy = ". 25"
spectmethod = "كرر">
<stop offset = "0 ٪" stop-color = "red"/>
<stop offset = "100 ٪" stop-color = "Blue"/>
</radialgradient>
</defs>
<rect x = "50" y = "50" rx = "15" ry = "15"
fill = "url (#rgradient)"/>
</svg>
ملء الملمس ملء الملمس هو أيضا وسيلة شهيرة للملء. في SVG ، يمكنك استخدام النمط لإنشاء نسيج ، ثم استخدام هذا النمط لملء كائنات أخرى. لنلقي نظرة على المثال مباشرة:<svg>
<defs>
<lineargradient id = "gradient6">
<stop offset = "0 ٪" stop-color = "white"/>
<stop offset = "100 ٪" stop-color = "Blue"/>
</lineargradient>
<lineargradient id = "gradient7" x1 = "0" x2 = "0" y1 = "0" y2 = "1"
<stop offset = "0 ٪" stop-color = "red"/>
<stop offset = "100 ٪" stop-color = "Orange"/>
</lineargradient>
</defs>
<defs>
<pattern id = "pattern" x = ". 05" y = ". 05">
<rect x = "0" y = "0" fill = "skyblue"/>
<rect x = "0" y = "0" fill = "url (#gradient7)"/>
<circle cx = "25" cy = "25" r = "20" fill = "url (#gradient6)" fill-opacity = "0.5"/>
</pattern>
</defs>
<rect fill = "url (#pattern)" Stroke = "Black" x = "0" y = "0"/>
</svg>
يبدو المثال بسيطًا ، وإنشاء نمط من لون التدرج ثم استخدم النمط
ملء المستطيل. لاحظ هنا:
1. التأثير مختلف عند ملء هذا النمط في متصفحات مختلفة.
على سبيل المثال ، تعمل الأمثلة كما هي في Firefix و Chrome. ولكن إذا قمت بعمل لون التدرج
إذا تم تعريف النمط في نفس مجموعة DEFS ، فلا يزال بإمكان Firefox تقديمها بشكل طبيعي.
ومع ذلك ، لا يمكن لـ Chrome التعرف على لون التدرج ، بل سوف يملأه فقط باللون الأسود الافتراضي.
2. النمط يحتاج أيضا إلى تحديد الهوية.
3. يجب أيضًا تحديد النمط في DEFS.
4. استخدام النمط هو أيضًا تعيين URL مباشرة (#ID) لملء أو السكتة الدماغية.
ما ورد أعلاه كلها بسيطة جدا. دعونا نركز على تمثيل الإحداثيات في المثال. الإحداثيات أكثر تعقيدًا في النمط.
يحتوي النمط على خصائصين ذات صلة: سمات Patternunits و PatternContentUnits ؛ لا يزال لدى كلا الخصائين قيمتين فقط: ObjectBoundingBox و UservesPaceonuse. تمت مناقشة معنى هاتين القيمتين أعلاه. ما يسهل الخلط بينه هو أن القيم الافتراضية لهاتين الخصائص المختلفة مختلفة ، ولكن عندما تفهم أسباب القيام بذلك ، ستجد أن القيام بذلك أمر منطقي.
1. سمة patternunits
هذه الخاصية هي نفس خاصية التدرج المتدرج ، ويتم استخدام ObjectBoundingBox بشكل افتراضي. السمات المتأثرة بهذه السمة هي x و y والعرض والارتفاع. تحدد هذه السمات الأربع نقطة البداية وعرض النمط على التوالي. كلاهما يستخدمان القيم النسبية ، وفي المثال ، يريدون ملء الاتجاهات الأفقية والرأسية 4 مرات ، لذلك يتم تعيين كل من العرض والارتفاع على 0.25.
2. PatternContentUnits الخاصية
القيمة الافتراضية لهذه الخاصية هي عكس ذلك تمامًا ، باستخدام UsperSpaceonuse. تصف هذه الخاصية نظام الإحداثيات للأشكال المرسومة في النمط (مثل المستقيم ، الدائرة أعلاه). وهذا يعني ، بشكل افتراضي ، أن الشكل الذي ترسمه في النمط يستخدم نظام إحداثيات مختلف وحجم/موضع النمط نفسه. بالنظر إلى الحالة في المثال أعلاه ، نريد ملء مستطيل 200*200 وكرر كل اتجاه 4 مرات. هذا يعني أن كل نمط هو 50*50 ، لذلك يتم رسم المستطيلتين ودائرة داخل النمط في هذا المستطيل 50*50. وبهذه الطريقة ، يمكننا أن نفهم إحداثيات المستطيل والدائرة في النمط أعلاه. بالإضافة إلى ذلك ، من أجل مركز النمط في هذا المثال ، يجب تعويضه بمقدار 10 بكسل قبل التقديم. يتم تقييد هذه القيمة بواسطة خاصية PatternUnits ، لذلك افتراضيًا ، تكون قيم X و Y هي: 10/200 = 0.05.
فلماذا ضبط النمط القيم الافتراضية للسمات مثل هذه؟
يتم تحديد ذلك من خلال استخدام المستخدم (تمت مناقشته في المثال أعلاه):
نمط النمط الأول : أعتقد أن هذا هو معظم الموقف ، لذلك تتم معالجته كقيمة افتراضية: يتم تمديد النمط حيث يتم تحجيم الرسم البياني الخارجي ، وبغض النظر عن حجم المربع الخارجي ، سيتم ملء النمط دائمًا 4 مرات في كلا الاتجاهين. ومع ذلك ، لن يتم تمديد الرسومات الموجودة في النمط حيث يتم تحجيم المربعات المملوءة بالخارج. على الرغم من أنها بعيدة المنال ، فقط افهمها. نمط النمط الثاني : يتم تمديد الشكل في النمط أيضًا حيث يتم قياس شكل الحافة الخارجية. يمكننا أيضًا تعيين قيمة خاصية PatternContentUnits على ObjectBoundingBox لتحقيق هذا التأثير. على سبيل المثال ، قم بتعديل جزء النمط على النحو التالي:<pattern id = "pattern" patternedContentUnits = "ObjectBoundingBox">
<rect x = "0" y = "0" fill = "skyblue"/>
<rect x = "0" y = "0" fill = "url (#gradient2)"/>
<circle cx = ". 125" cy = ". 125" r = ".
</pattern>
بعد التعديل ، عند تغيير حجم المستطيل المملوء ، سيتم أيضًا تمديد الشكل في النمط. وبعد التعديل ، يتم تغييره إلى إحداثيات الكائن المحيطي ، وبالتالي لم تعد هناك حاجة إلى إحداثيات X و Y للنمط. سيتم ضبط النمط دائمًا لتناسب الشكل المملوء.
نمط النمط الثالث : تم إصلاح شكل وحجم النمط. بغض النظر عن كيفية تحجيم الكائنات الطرفية ، يمكنك تغيير نظام الإحداثيات إلى مستخدمي orsepaceonuse لتحقيق هذا التأثير. الرمز كما يلي:<pattern id = "pattern" x = "10" y = "10" patternunits = "userspaceonuse">
<rect x = "0" y = "0" fill = "skyblue"/>
<rect x = "0" y = "0" fill = "url (#gradient2)"/>
<circle cx = "25" cy = "25" r = "20" fill = "url (#gradient1)" fill-opacity = "0.5"/>
</pattern>
تظهر الأنماط النموذجية في هذه 3 في الشكل أدناه:
المرجع العملي:المستند الرسمي: http://www.w3.org/tr/svg11/
فهرس البرنامج النصي: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
مركز التطوير: https://developer.mozilla.org/en/svg
المرجع الشعبي: http://www.chinasvg.com/